20 Most Stylish Contact form in Blogger

First of all, make a backup of your Blogger/Wordpress template so that you can use your theme in case of any mistake.

Please Read full user manual of this code and then try for your website. It's 100% working if you are using at proper way. So, you have to follow our given instructions. If you do not have enough knowledge about coding then be sure to read carefully and use the code following the complete guideline otherwise it may not work properly.

Don't be hurry ! At first read how to use this code poperly. We will give you opportunity to download full script. Otherwise it's may not working poperly.

CSS Section:

Copy this css code from below and paste it in CSS section of your blogger template. 

 

<style>

.tb-contact-form-widget{background-color:#A4A4A4;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWhWVovkvx-9hrNiIhqruzbOAbtlSaNst3Y8rVP_d_cM4eoLGCM-CL8eQz9bgWt6aTgDGjRw_dq_E5nqAf5Rcavrm3Yxlg296FAC1sBeFx390Az2zTCniAdmCFOei9rcPPI1MwQTnG1sHS/s1600/to-contact-img-2.jpg");background-repeat: repeat;background-position: 100% 100%;color:white;padding:25px;}

.srbtn{display:inline-block;}

.cform-button, .btn-reset{background-color:#f1f1f1;padding:5px 30px;}

.cform-button:hover {background-color: #2980b9;color: #fff;}

.btn-reset:hover {background-color: red;color: #fff;}

.tb-contact-form-widget h3{text-align:center;margin:20px 0;padding:10px 0;border-top: 1px dotted #f5f5f5;}

.c-form-name, .c-form-email { width: 50%; max-width: 50%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;

-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;

box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}

.c-form-email-message { width: 95%; max-width: 95%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;

-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}

.c-form-name, .c-form-email, .c-form-email-message input:focus{background-color: #FFF;box-shadow: 0 0 0 1px #E8C291 inset;border-color: #E8C291;outline: none;

-moz-box-shadow: 0 0 0 1px #e8c291 inset;

-webkit-box-shadow: 0 0 0 1px #E8C291 inset;}

.b-social-buttons{list-style-type:none;text-align:center;}

.b-social-buttons li{display:inline-block;padding:15px;background-color:#f5f5f5;border-radius:5px;}

.b-social-buttons li a{color:#333;text-decoration:none;}

#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:100%;margin-top:35px;}

</style>

HTML Section:

<div class="tb-contact-form-widget"> <form name="contact-form"> <div class="form-name"><span><i class="fa fa-pencil-square-o"></i> Your Name: </span><br /><input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div> <div class="form-email"><span><i class="fa fa-envelope-o"></i> E-mail Address *: </span><br /><input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div><div style="clear: both;"></div><div class="form-message"> <span><i class="fa fa-keyboard-o"></i> Message *:</span><br />

<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><div class="srbtn"><input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" /><input type="reset" class="btn-reset" value="Clear" /></div><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div>

<h3>Our Social Sites</h3>

<ul class="b-social-buttons">

<li><a href="#" class="btn-lg"><i class="fa fa-twitter"> <span class="network-name">Twitter</span></i></a></li>

<li><a href="#" class="btn-lg"><i class="fa fa-facebook"> <span class="network-name">Facebook</span></i></a></li>

<li><a href="#" class="btn-lg"><i class="fa fa-youtube-play"> <span class="network-name">Youtube</span></i></a></li>

</ul></div></form></div>