How to add Blogger Contact Form to a Specific Page

The following tutorials will be guiding you how to add a contact form to your blog on a specific page. Having a contact form is very important as it can serve as a communication tool for your visitors or customers to reach you. Instead of asking your visitors to contact you via email, they can use the contact form to reach you directly. Blogger now offer a new contact form widget and with only a few tweaks, you can put the contact form on a specific page instead of on the sidebar which is not so ideal.

Step 1:
Sign in to your Blogger account and goto Layout

Step 2:
From the Layout, click on Add a Widget on the sidebar. Click on the More Widgets and add the Contact Form Widget. You may change the title or leave it by default. Click on Save.

The Blogger contact form will now appear on the sidebar of your blog. However this is not an ideal location to place the form at. We'll need to hide the contact form and place it on a specific page.

Step 3:
Goto the Template, and click on Edit HTML. Search for this code ]]></b:skin> and then paste the following code right above the ]]></b:skin>

#ContactForm1
{
display: none ! important;
}

If you are unable to locate ]]></b:skin>, go back to the Template, click on Customize, Advanced and place the code above here.

Step 4.
Create a page in Blogger. Goto Pages, New Page

Step 5.
Switch to HTML mode and click on Options on the right. Under the Line breaks, select the option "Use <br> tag".

Step 6.
Paste the following codes on the HTML page and publish your page.

<form name="contact-form">
<br />
<br />
Your Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30″ value=" type="text" />

<br />
Your Email:
<span style="color: red; font-weight: bolder;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30″ value=" type="text" />

<br />
Your Message: <span style="color: red; font-weight: bolder;">*</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>

<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />

<br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div 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>

Step 7.
Now go back to the Template, Edit HTML. Select ContactForm1 from Jump to Widget. Find and select the codes starting from <form name=’contact-form’> and end with </form>. Delete the codes. and save your Template.