How To Add Blogger Contact Form Into A Page 2014

You can also add Blogger contact form into a page of your Blogger website. It will work absolutely fine and it will not break anything. Let me show you how:

Note: In order to add contact form to a page, you first need to add the contact form widget to the sidebar of your Blogger.
Hiding Contact Form From Your Sidebar

First, we need to hide the default contact form from your Blogger’s sidebar widget. Navigate to your Dashboard > Template > Edit HTML. Search and paste this code just above ]]></b:skin>:

#ContactForm1
{
display: none ! important;
}

Save your template.

Add Contact form widget on a Static Page

Now we’re going to add the contact form widget to a stand-alone page. Follow below steps and make customization in the bottom of the steps.

1: Click on ‘Pages’ tab on the left hand side.
2: Now click on New page >> Blank page.

3: Switch to HTML mode and click on ‘options’ tab on the right side. Then select the “Use <br> tag” option in the Line Breaks section like below.

4: Now paste below code on the empty Edit HTML field.

<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>

Customization

• 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. 

5: Last Save your static page.