Contact form template 2

      No Comments on Contact form template 2

Contact form template 2 in CSS using bootstrap framework.

Contact form template 2

Contact form template 2

Markup:

<div class="row">
   <div class="col-sm-12 col-md-8">
     <h4>Contact form</h4>
     <form>
       <div class="form-group">
         <input type="text" class="form-control input-lg" placeholder="Name">
       </div>
       <div class="form-group">
         <input type="email" class="form-control input-lg" placeholder="Email">
       </div>
       <div class="form-group">
         <textarea class="form-control" rows="5" placeholder="Message"></textarea>
       </div>
       <button type="submit" class="btn btn-primary">Send</button>
     </form>
   </div>
   <div class="col-sm-12 col-md-4">
     <h4>Information</h4>
     <div class="highlighted-block">
       <dl class="icon-holder">
          <dt><i class="fa fa-map-marker"></i></dt>
          <dd>1234 Abcd Colony, India</dd>
          <dt><i class="fa fa-phone"></i></dt>
          <dd>(+91) 987 654 3210</dd>
          <dt><i class="fa fa-fax"></i></dt>
          <dd>(+91) 123 456 7890</dd>
          <dt><i class="fa fa-envelope"></i></dt>    
          <dd>hi@yoursite.com</dd>
       </dl>
     </div>
        <br>
        <ul class="social-icons size-sm text-center">
          <li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
          <li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
          <li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
          <li><a class="instagram" href="#"><i class="fa fa-instagram"></i></a></li>
        </ul>
    </div>
 </div> 

CSS:

.highlighted-block
{
  padding:20px;
  background-color:#fafafa;
}
dl
{
  margin-bottom:0;
  font-size:14px
}
dl:after{
  content:'';
  display:table;
  clear:both
}
dl dd,dl dt{
  float:left;
  display:inline-block;
  padding:12px 0;
  color:#818a91
}
dl dt{
  width:50%;
  font-weight:600;
  text-align:right;
  padding-right:16px
}
dl dd
{
  width:50%;
  padding-left:16px;
}
dl.icon-holder dt
{
  width:9%;
  text-align:left;
  padding:4px 0;
  font-size:16px;
  line-height:25px
}
dl.icon-holder dd
{
  width:91%;
  line-height:25px;
  padding:4px 10px}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.rss:hover
{
  background-color:#f26522
}
.social-icons a.google-plus:hover
{
  background-color:#dd4b39
}
.social-icons a.twitter:hover
{
  background-color:#00aced
}
.social-icons a.linkedin:hover
{
  background-color:#007bb6
}
.btn
{
  margin:30px 0px;
  padding:15px;
  background:#29aafe;
  border-color:#29aafe;
  width:150px;
}

Demo:

See the Pen Contact Us form by scanfcode (@scanfcode) on CodePen.

Summary
Contact form template 2
Article Name
Contact form template 2
Description
Contact form template 2 in CSS and using bootstrap framework, completely responsive to all media sizes. Get complete code...
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *