10 April 2013

Add Blogger Contact Form to a Static Page

I am sure that you may know about the official blogger contact form. It is used to contact the blog author/admin by the visitors. And you can easily add it to the your blog's sidebar, footer or somewhere else. But what if you want to add it to any static page of your blog. Well you can add it by following steps.


Step 1 : Go to Blogger Dashboard >> Click on Layout >> Click on Add a Gadget >> Now a pop up window will open

Add Blogger Contact Form to a Static Page
Add a Gadget

Step 2 : Click on More Gadgets >> Now click on Contact Form New! >> Click on Save
Add Blogger Contact Form to a Static Page 1
Click on Contact Form New!

Step 3 : Go to Blogger Dashboard >> Click on Template >> Click on Edit HTML >> Click on Jump to Widget and select Contact Form1
Add Blogger Contact Form to a Static Page 2
Click on Jump to Widget and select Contact Form1

Step 4 : Delete the portion inside "<b:includable id='main'> and </b:includable>" >> Click on Save Template
Add Blogger Contact Form to a Static Page 4
Step 4

Step 5 : Go to Blogger Dashboard >> Click on Pages >> Click on New Page >> Now Click on Blank Page >> Click on HTML >> Paste the following code and Click on Publish

<table><tbody>
<tr><td>Name</td> <td>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="31" type="text" value="" />
</td></tr>
<tr> <td>
Email<span style="font-weight: bolder;">*Mandatory</span></td><td>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="31" type="text" value="" />
</td></tr>
<tr> <td>
Message<span style="font-weight: bolder;">*Mandatory</span></td><td>
<textarea class="contact-form-email-message" cols="26" id="ContactForm1_contact-form-email-message" name="email-message" rows="6"></textarea>
</td></tr>
<tr><td align="center" colspan="3">
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
</td></tr>
<tr><td align="center" colspan="3">
<div style="max-width: 223px; text-align: center; width: 99%;">
<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>
</td></tr>
</tbody></table>

Happy Blogging!