How To Install Blogger Own Contact Form On A Static Blog Page

Since the start of the year 2013 the Google has launched many new features i.e. widgets for its Blogger users. the two main widgets of this launch are Wikipedia Search and Blogger Contact Form. These two widets will certaninly be useful for the bloggers or webmasters.

The wikipedia gadget will allow the user to directly search and move to wikipedia from inside the blog post on the other hand the contact form helps the veiwers to remanin in contact with the blog admin easily. This contact gadget has easy installation just add the blogger contact form widget as you usually do to add other blogger widgets and you are done.

There are many advantages of using this contact form as the default contact form for you Blogger blog such as it is the offical Blogger widget, it is absolutely free, your visitors does not have to go through different boggus ads, it has small and easy to code, has less timing for loading and you can send unlimited mails within no time.

The main problem that forced me to write this post is that by default you can only add the contact widget in the blogger sidebar or in the footer only. I think nobody wants to show the contact form in the sidebar, every blogger has designed a seperate page for the Contact Us. Through the method defined in this post you can easily add this contact form widget in any specific page of your blog easily.

To add this beautiful widget in your blog first you have to insert the default contact gadget in your blogger sidebar. To do so first go to Layout then to Add a Gadget then to More Gadgets and then add Contact Form gadget. Once you are done then simply paste the code given below to the page, on which you want to install the contact form. Kindly do not remove the classes and ids used in the contact form other wise it will not work.

Code

<form name="contact-form">
Name<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Your Name" size="30" type="text" value="" />
<br /><br />
E-mail
<span style="font-weight: bolder;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Your E-mail" size="30" type="text" value="" />
<br /><br />
Message
<span style="font-weight: bolder;">*</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Your Message" rows="5"></textarea>
<br /><br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div>
vdiv 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>

The last work you have to do is to paste the following CSS code in the stylesheet of your blog i.e. paste the following code before the ]]></b:skin> that can be accessed throught the Template > Edit HTML. The #ContactForm1 is to hide the contact form gadget installed in the sidebar while the other classes are of the contact bar CSS. you can edit them as you wish.

Code

#ContactForm1{
display: none! important;
}
.contact-form-name, .contact-form-email, .contact-form-email-message{
max-width: 100%;
border: none;
color: #ababab;
font-size: 15px;
font-family: 'ABeeZee', sans-serif;
background: transparent;
}
.contact-form-error-message-with-border, .contact-form-success-message-with-border{
width: 100;
border: 1px solid;
padding: 10px 0 10px 40px;
margin: 10px 0;
-moz-border-radius:.3em;
-webkit-border-radius:.3em;
border-radius:.3em;
text-align: left;
font-size: 15px;
font-family: 'ABeeZee', sans-serif;
}
.contact-form-error-message-with-border{
background: #ffbaba;
color: #d8000c;
background-image: url('http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/24/red-cross-icon.png');
background-repeat: no-repeat;
background-position: 10px center;
}
.contact-form-success-message-with-border{
background: #dff2bf;
color: #4f8a10;
background-image: url('http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/24/green-ok-icon.png');
background-repeat: no-repeat;
background-position: 10px center;
}
.contact-form-cross{
display: none;
}