How To Add Blogger Contact Form to Specific or other Pages

If you want to hide contact form from side bar and you should add the contact form widget so that showing it on a specific page. If you already have added it, please leave these steps and who don’t added official blogger "Contact Us" widget can follow below some steps

See the DEMO of the contact form

1. First sign in to your Blogger account with your valid user name and password and go to Layout
2. Now click on  "Add a Gadget" link options and "More Gadgets" see the below snapshot
3. Now find “Contact form” page element and click on it.

3. If you want to change the title of the contact form widget, so you can change it which ever you want. then click on "Save" button
The gadget is has been added to sidebar  but now we have to hide from sidebar and want to be shoing in to specific page so please lets go to do next step.

4. Now go to Template and click on the "Edit HTML" button.Then click the "Format template" and press "CTRL+F" or "F3" button from the keyboard and find this code "</b:skin>"then paste below code just above of "]]></b:skin>"code in the blogger template

[      #ContactForm1

{

display: none ! important;

}          ]

5. Click on "Pages" tab from on the left hand side cournet
6. Now click on "New page >> Blank page" options

7. Now switch to the HTML mode paste the below code inside there inside empty page

<form name="contact-form">
<p></p>
Your Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Your Email:
<span style="font-weight: bolder;color:red;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Your Message: <span style="font-weight: bolder;color:red;">*</span><br />
<textarea class="contact-form-email-message"  id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<p></p>
<div style="text-align: center; max-width: 222px; 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>

Note:
You can modify or change highlighted words with relevant your own words.(i.e: for Your Email,Type your Email address)
Replace Required message instead of red color star symbols(*)( i.e: (required) )
Change Send with wished text to be shown on Submit button
Now finally press the "Publish" button now go to blogspot site and see there has been shown.