Stylish Blogger Contact Form For Static Page

Hello and Welcome to GetWebInfo. Here on this post you will learn About Stylish Blogger Contact Form For Static Page of Blogger. Blogger contact form is very important to give your readers the opportunity to communicate with you. Adding a contact form to your Blogger blog is not so tough. There is a Blogger Contact Form widget available in the list of blogger default widget.




In this way we will make a contact page for our blogger blog. Blogger default contact form widget is very fresh and lightweight. To make it more attractive, I will provide some beautifully designed Blogger Contact For Widget. You will be able to use those in a contact page of your blogger blog. So let's start now.


How to Add/Enable Blogger Contact Form In Blogger? 

Make Sure you can add contact form widget to your blogger blog, If not add then add it to your blogger blog. This will enable functionality of the contact form. Otherwise we will not receive emails from our contact forms to do that first of all:


  1. Sing in to Your blogger account
  2. Go to the Blogger Dashboard
  3. Select Layout section from the left menu
  4. Click on the Add a Gadget 
  5. Click on the Blue Plus Button of the Contact Form Gadget and then Save it and also save your template setting. 


Now you have to be successfully added the Blogger Contact Form Widget in your blogger bloge.


How to Hide Default Blogger Contact Form?

To Hide this default Blogger Contact Form, Go to the "Template" Section and click on the Edit HTML button. Now find the style ending code :]]></b:skin>. Paste this small CSS Code just above this, save your template and you are done. Now can just reload your blogger site page and you will see the default contact us form will be disappears....

 Code is Given Below

div#ContactForm1 {
display: none !important;
}


How to Insert Font Awesome Icons In Blogger

I have used some Font Awesome icons in these custom Blogger contact form. So you will have to insert this style sheet into your blog. To do this

Go to the Template Section > Click on Edit HTML> Find the ending head </head>

Copy the code and paste it right above the " </head>" Section

The Code is that.....

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Click on the Save Template Button You Are all don!

Note: If this code is also in to your Blogger Template then no need to add this code again to your blogger template....

Blogger Contact Form for Your Blogger Static Page

Step 01: Go to the Pages section and click on the New Page button as shown below In Picture



Step 02: Fill up the Page Title with Contact Us or Contact page in Blogger.

Step 03: Now go the Page setting Option and click on the section of HTML in Blogger Page builder section. See the screenshot to become clearer.....




01. Blogger Contact Form Design No.01

This is a beautiful and responsive blogger contact form. It has a simple and attractive Design. Also this form has a clear button to make the text area empty with one click. Is has some social buttons to notify users about social pages....




<style>
.tb-contact-form-widget{background-color:#A4A4A4;background-image: url("https://2.bp.blogspot.com/-JgcTvhPBO1o/WU1E2reu27I/AAAAAAAAAE4/op_A1zV78IMyRhQYKGV1zbcXtX3eybwNACPcBGAYYCw/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>
<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>
Note: If you get the "https" error message while installing this widget then simply "Dismiss" this and click on the update again because if we use https ever then all of the resources of this form will be redirect automatically...


02: Blogger Contact Us Form Design No.02


<style> #ContactForm2{ background:#98AFC7; } .c-form{ border:1px solid #f5f5f5; padding:0 0 20px 0; overflow:hidden; } .c-form-left{ padding: 20px; } .c-form-right{ padding: 20px; } .contact-form-widget { margin: 0 auto; padding: 10px; width: 400px; max-width: 100%; }.contact-form-email-message {width: 100%;max-width: 100%;margin-bottom: 10px;} </style> <div class='c-form'> <div class='c-form-left'> <div class='form' style='float:left;'>  <div class='widget ContactForm' id='ContactForm2'>   <div class='contact-form-widget'>     <div class='form'>       <form name='contact-form'>         <p>Name</p>         <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>         <p>E-mail *</p>         <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>         <p>Message *</p>         <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea><br/> <br/>         <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>         <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>         <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>       </form>     </div>   </div> </div></div></div> <div class='c-form-right'> <div style='float: right;'> <div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: left;"> <a href="https://3.bp.blogspot.com/-yRd1HyVntQc/WBnoEKlsRFI/AAAAAAAAD8I/12a9gt1XgNga_lTUQFMPhOsa5qAoCnwpgCLcB/s1600/bo-contact-avatar.jpg" imageanchor="1"><img border="0" src="https://3.bp.blogspot.com/-yRd1HyVntQc/WBnoEKlsRFI/AAAAAAAAD8I/12a9gt1XgNga_lTUQFMPhOsa5qAoCnwpgCLcB/s1600/bo-contact-avatar.jpg" /></a></div> <br />Address Line 1<br />Address Line 2<br />Address Line 3<br />State<br />Telephone: +49 30 47373795<br />E-mail: mail@blogornate.com     </div> </div> </div></div> <div style='clear: both;'></div>

03: Blogger Contact Us Form Design No.03




<style>.c-form-name, .c-form-email, .c-form-email-message{padding:10px;margin:8px 0 8px 0;border:1px solid #E5E5E5;width:50%;color:#999999;box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;-webkit-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;}
.c-form-email-message{width:95%;height:150px;line-height:18px;}
.tb-contact-form-widget input:hover,textarea:hover,input:focus,textarea:focus{border-color:1px solid #C9C9C9;box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;-webkit-box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;}
.tb-contact-form-widget label{margin-left:10px;color:#999999;}
.cform-button {width:100px;height:40px;background-color:#474E70;color:#FFF;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:50%;margin-top:25px;}
</style><div class="tb-contact-form-widget">
<form name="contact-form">
<div class="name">
<input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="Your Name"/>
<label for="name">Name</label>
</div>
<div class="email">
<input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="mail@example.com"/>
<label for="email">E-mail *</label>
</div>
<div style="clear: both;"></div>
<div class="message">
<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" placeholder="Write something to us...">
</textarea>
<div class="srbtn">
<input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
</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></div></form></div>
After Ad any one of them to your blogger page then click on save or Publish button of your blogger page panel. You can all don!, All of these blogger contact form designs are tested and 100% working to your blogger page.