Mẫu Contact Form với social network links

11/10/2017

Chào các bạn ! Hôm nay mình sẽ chia sẻ cho các bạn một mẫu form liên hệ đơn giản với sự kết hợp hài hoà giữa các trường nhập liệu, và các nút bấm cho phép người dùng link trực tiếp đến các trang mạng xã hội. Với mẫu form này, chúng ta sẽ không phải viết css nhiều, chỉ việc đơn giản là làm theo mẫu và chèn thư viện Bootstrap css là có thể sử dụng được.

Mẫu Contact Form với social network links

Xem Demo | Download

Việc chúng ta làm đầu tiên là khai báo thư viện Bootstrap và font từ Google cho form liên hệ này.

<link href="https://fonts.googleapis.com/css?family=Oswald:700|Patua+One|Roboto+Condensed:700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

HTML

Sau đó là các bạn tạo form theo cấu trúc html như sau :

<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>

CSS

Các bạn chỉ cần cho thêm vài dòng css tuỳ chỉnh theo ý muốn của các bạn.

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:#26a5d3;
}
a:hover,a:focus{
  text-decoration:none;
  color:#26a5d3;
}

#contact{
  
  color:#f4f4f4;
  padding:80px 0;
}

textarea.form-control{
    height:100px;
}

Mình hy vọng là các bạn sẽ có thêm một mẫu form hữu ích cho việc thiết kế web cho các công ty cũng như dự án của các bạn.

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !