Add Blogger Official Contact Form To a Page/Post of Blogger Blog

Blogger contact form to specific page or post : 

Blogger providing official contact form widget to add contact form to blogger blog. With this contact form widget we can add contact form in header , sidebar and footer ( i.e in any place of the widget area) . But embedding contact form in specific post is really good than adding contact for on blogger sidebar. We can't install blogger contact form directly to a page , we have to do some changes to add blogger's contact form to a specific page in your blogger blog.

How to add Blogger official contact form to a specific page/post of Blogger blog:

To add blogger contact form , first we have to install blogger contact form widget on your blogger blog sidebar , and then hide that contact form on your blogger sidebar. After that we need to create new contact page and then paste contact form css code in that page.That's it . This method is really easy to follow. With this method we can add blogger's contact form to a specific page and also add to a specif post in your blogger blog.

Follow below steps to add Blogger official contact form to a specific Blogger page/post

Embed contact form in specific page :

Step 1 : Go to Blogger dashboard

Step 2 : Click on Layout and click on Add a Gadget and add Contact Form Widget ( add contact form widget on blogger side bar )

Step 3 : Click on Pages and create new page and set page name as Contact Us

Step 4 : Turn post editor in to HTML mode by click on HTML tab

Paste below code in that editor box 

<form name='contact-form'>
<div>Name: </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Email *</div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Message *</div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<div style='text-align: center; max-width: 500px; width: 100%'>
<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>
</div>
</form>

Step 5 : Click on Publish button.

Now contact form widget will appear on your blogger sidebar and also in your contact page. So now we have to hide contact form on blogger side bar.

Hiding contact form on blogger sidebar :

Follow below steps

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 :  Search ]]></b:skin> 

Add below code just above ]]></b:skin>

#ContactForm1{
display: none!important;
}

Step 5 : Click on Save template.

Now contact form will not appear on your blogger sidebar. If appeared after doing above changes , the do like below ( only if above method not working ).

Search   /* Widgets ----------------------------------------------- */

 add below code in any where in the widget section. ( that is under the above line )

#ContactForm1{
display: none!important;
}