Ả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ẻ!

CHIA SẺ BÀI VIẾT

- - 24 bình luận
CHUYÊN MỤC
- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
• Email: nguyenchanhduc0908@gmail.com
• Facebook: facebook.com/ducidol0908

BÌNH LUẬN (24)

  1. Chụp cho cái hình demo xem thì có mất gì đâu mà lười :v

    Trả lờiXóa
  2. Đách có cái demo
    Cần lắm cái demo để xem ntn, đẹp thì ok
    Ngày càg phát triển blog nha

    Trả lờiXóa
  3. :v có demo không, cần lắm để xem :3

    Trả lờiXóa
  4. Chất đó em đơn giản nhưng rất là đẹp !

    Trả lờiXóa
    Trả lời
    1. Dạ em cảm ơn anh! Lâu quá không thấy anh ghé thăm!

      Xóa
  5. Niemstyle đã được chuyển về anhtrainang.com rồi nha anh em :v

    Trả lờiXóa

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

Vui lòng xem Hướng Dẩn Sử dụng trước khi bình luận

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

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)

Không được backlink và nói tục. Hãy là một độc giả có ý thức.

Nếu các bạn muốn liên hệ riêng với mình thì hãy click tại đây nhé.