Star Đức Blog: 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ẻ!