CÁCH TẠO FORM CONTACT TUYỆT ĐẸP CHO BLOGSPOT.

Ảnh minh họa.
Xin chào các bạn, hôm nay mình sẽ hướng dẫn các bạn tạo một form contact tuyệt đẹp cho phần bố cục. CSS này nó rất là nhẹ, các bạn làm theo mình là có thể thực hiện được.
 HTML

<section id="contact" class="content-section text-center"> <div class="contact-section"> <div class="container"> <h2>Contact Us</h2> <p>Feel free to shout us by feeling the contact form or visiting our social network sites like Fackebook,Whatsapp,Twitter.</p> <div class="row"> <div class="col-md-8 col-md-offset-2"> <form class="form-horizontal"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@thuthuatweb.net"> </div> <div class="form-group "> <label for="exampleInputText">Your Message</label> <textarea class="form-control" placeholder="Description"></textarea> </div> <button type="submit" class="btn btn-default">Send Message</button> </form> <hr> <h3>Our Social Sites</h3> <ul class="list-inline banner-social-buttons"> <li><a href="#" class="btn btn-default btn-lg"><i class="fa fa-twitter"> <span class="network-name">Twitter</span></i></a></li> <li><a href="#" class="btn btn-default btn-lg"><i class="fa fa-facebook"> <span class="network-name">Facebook</span></i></a></li> <li><a href="#" class="btn btn-default btn-lg"><i class="fa fa-youtube-play"> <span class="network-name">Youtube</span></i></a></li> </ul> </div> </div> </div> </div> </section>
Các bạn thêm CSS này trước HTML bên trên nhé.
<style>
body{ width:100%; height:100%; font-family: 'Roboto Condensed', sans-serif; background:#333333; } h1,h2,h3 { margin:0 0 35px 0; font-family: 'Patua One', cursive; text-transform: uppercase; letter-spacing:1px; } p{ margin:0 0 25px; font-size:18px; line-height:1.6em; } a{ color:#2fbcb3; } a:hover,a:focus{ text-decoration:none; color:#16e0e0; } #contact{ color:#f4f4f4; padding:80px 0; } textarea.form-control{ height:100px; } </style>
Lưu HTML và Css lại nhé!

Lời kết



Ảnh Demo.
Vậy là xong 3 bước tạo một form contact rồi đúng không ? Nếu các bạn thấy đẹp thì share cho mình nhé! Chúc các bạn 1 ngày vui vẻ!
CÁCH TẠO FORM CONTACT TUYỆT ĐẸP CHO BLOGSPOT. Reviewed by Lê Anh Đức on tháng 3 29, 2018 Rating: 5

Không có nhận xét nào :

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé

BIỂU MẪU LIÊN HỆ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.

Tạo Ảnh Đẹp | Cách tạo ảnh và chia sẻ tài nguyên