Add Google Powered Custom Contact Form into blog page

The medium of communicate between blogger and readers is contact form. In blog and website, contact form is an essential part to keep in touch. Google blogger introduced Contact form from the beginning of 2013 but before that we have to depend of on third party contact form service provider as a medium of communication. Though Google blogger take this step lately but this has brought a revolutionary changes in blogging platform and now users are experiencing a flavor of default form.

Google Blogger those who already used default contact form some of them don't like the appearance of this. Because you can't directly add this contact form in a blog page.  So today I will add some extra spice on Google default contact form that will look exceptional and attractive as well as we will move this default contact form in a separate blog page. And your blog visitors will be happy to see it.

I have split this tutorial into three parts. In first part we will add Blogger default contact form, secondly we will hide the blogger contact form and in finally we will add this contact form in a separate blog page.

Install Blogger Default contact form

In this stage we will add/install Blogger Default contact form in blog. To do this just follow the below steps-

Step 1 Go to Blogger Dashboard and Select Layout

Step 2 From Layout Click Add a gadget and from popup window select More Gadgets tab in left side.

Step 3 Now click Contact Form and Save it.

That's it we have added the contact form successfully.

Hiding the contact form from Blog home page

After adding contact from in from layout area it will display on your blog home page and also on other pages if you add it in Blog sidebar or footer. But our main aim to display the contact form in separate blog page so we have to hide the contact form from blogger home page first. You can hide the contact form by following below steps.

Step 1 Go to Blogger Dashboard and Select Template -> Edit HTML

Step 2 From Now add the below code above ]]></b:skin>

.ContactForm {display:none !important;}

Step 3 Click on Save Template button to save your template.

You can check your blog that contact form is displaying or not. if you have added the CSS code properly then I am sure default contact form is hidden now.

Showing contact form in a Separate Blog Page

In final stage we will display the contact form with custom gradient colored and stylish outlook. Therefore Follow the below steps appropriately.

Step 1 Go to Blogger Dashboard and Select Pages -> New Page

Step 2 In page title write Contact Us and switch the view mode to HTML

Step 3 Now simply paste the below code and hit the Publishbutton

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }
</style>
 <div dir="ltr" style="text-align: left;" trbidi="on">
<style>
.bsads{
margin-bottom:10px;
border-bottom:solid 1px #ffffff;
padding-top:10px;
font-size:13px
}
.bsads-right-min{
border-left:solid 1px #ffffff;
height:Auto;
padding-left:10px
}
</style>
 <br />
<div class="ads">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%px;">
<tbody>
<tr>
<td><div class="bsads-right-min">
<style>
#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 470px;
height: 450px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#005C91;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#005C91');
background-image:-webkit-linear-gradient(top, #04BDFA 0%, #1A1A1A 50%, #005C91 100%);
background-image:-moz-linear-gradient(top, #04BDFA 0%, #1A1A1A 50%, #005C91 100%);
background-image:-ms-linear-gradient(top, #04BDFA 0%, #1A1A1A 50%, #005C91 100%);
background-image:-o-linear-gradient(top, #04BDFA 0%, #1A1A1A 50%, #005C91 100%);
background-image:linear-gradient(top, #04BDFA 0%, #1A1A1A 50%, #005C91 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 180px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGh2xHy8t-Ly5oZCJKchueLCU4cN1bMQUw7HB80Y2HKup0D3ENIa-4zpDrnNNq-RK3qoQY_cJAJEguio1s688kb4kXscP6hbCR4riswudsrchx9HqUB9lcC38_JXNAVmhCBjlsYy2XJbW6/s1600/BS+user.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width:180px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzLiMFfVRFmZ4WuWc9ihc-QnTmjvgSQPqPHdzDv_CnY9CcS9-9k0EWHcvM2ifJOcawwwZc0tP03G4OM0GhhwVxMSX0c7h7Wx07IaUO7LCvCaq5Uz6Dz_YoXb2I-8FgIRrpLOSN6ASbc-Mi/s1600/BS+pen.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 470px;
height: 285px;
margin: 5px auto;
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd88tHN-v9ZaNhEGiHYhjlhAyhEx7hx4fRK0C3Z_QqZhDKer5cN9zYxzESg_z0wEpK_GQRydC-q_mKNWPTapOvP6meC-Ysf9BMnYyPwxr38zQc-vgz0EghGnufAuxZTBu0TbVDsQD5qS6D/s1600/BS+message.png)no-repeat 10px 10px;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px;
height: 30px;
float: right;
color: #FFF;
padding: 0;
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}
</style>
 <br />
<div id="contact_wrap">
<h3>Contact Us</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>

Step 4 Now copy your Contact Us page URL and add the URL in your Menu bar. For Example: 

<li><a href='http://www.bloggerspice.com/p/contact-admin.html'>Contact US</a></li>

Customization

• To change the height and width just alter the value width: 470px; height: 450px;
• To change the Background color change color code #005a8a

Remember don't change the view mode because sometime code may change automatically. So always try to open your Contact Us page in HTML view.

I have tried with my best to make you understand easily. If still you have any question you can write this in our comment section. I will try to solve the issue. Thanks.