How To Add Blogger Contact Form In A Separate Page?

Contact page has become a most in every blogs these days. It helps the visitors to contact the owner of the blog and increases the healthy interaction between the visitors and the blog admin. In blogger by default there is a contact form widget that can be added to the layout. But every one loves to look professional and for that you may like to add the contact form in a separate page. Adding blogger official contact form is an easy task. So get started with the steps below:

Adding Contact Form Widget:

1. Log in to your Blogger dashboard.

2. Go to Layout and click on Add a Gadget.

3. Click on More Gadgets and select Contact Form .

4. Save the widget and check your blog if it is showing in your blog's layout.

Hiding Contact Form Widget From Blogger:

The next job is to hide the contact form widget from your blogger blog. For this you have to do a little coding in your template. 

1. Go to Blogger>>Template and click on Edit Html.

2. Find ]]></b:skin> in your template and paste the below code just before this.

#ContactForm1{display: none ! important;}

Adding Contact Form in A Separate Page:

This is the last step to add contact form to your blogger blog. 

1. Click on Pages option from left hand side of blogger dashboard. 

2. Now click on New Page.

3. Switch to Html mode and paste the below code in the blank 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>

4. From the right side click on Options and change as per the following.

5. Lastly save your page and publish it. Now check your contact page. Don't forget to put a title to your contact page.

Hope this tutorial helped you to Add Blogger Contact Form In A Separate Page. Please leave us a feedback in comments. Queries and problems can also be left in comments. Happy blogging!