Official Contact Form Widget for Blogger/Blogspot

When you create a blog or website, a contact page is a must. Most of us know about it already. Most of us already have it up on our website. When your blog is hosted on Blogger, you create a page using Page > New Page > Blank Page. Then you add some codes from a third party contact page feature provider, to make that page your contact page. If you have not created a contact page this way, do not worry, we do not require a third party to create our contact pages on Blogger anymore.

Blogger / Blogspot has an official “Contact Form” gadget. This gadget allows us to add a contact form on any part of our template. When you add this gadget, you will have a form up that asks for a visitor’s name, email and message. The visitor can input the values in that form and send you a contact message instantly. You will receive the message sent by your visitors in your Gmail (Email) of the same Google account, that you use to sign in for Blogger.

Add a Contact Form Widget in Blogger Template

1. After you’ve logged into Blogger and selected your blog, click on “Layout” from the links on the side.
2. Then, a Layout editor will be displayed. Click on “Add a Gadget” on the part of template where you’d like to place your contact form.
3. A popup follows your action. It displays a list of gadgets for blogger. From the links on the right click on “More Gadgets” to load up another page in the popup containing more gadgets.
4. On the top of the list, you will see “Contact Form”, click on it to add it to your Blogger template.
5. You will have to give this widget a title in the next page. Then hit the “Save” button.
6. Your contact form will be placed in your blogger template. Load up your blog and try that form. It works great.

About this GadgetThe thing about this contact form widget is that it will be placed in a sidebar or a location of your template. It will be displayed in every page of your blog. This is not how contact forms are generally positioned in a blog. A contact form goes well if it has a separate page and a link to it is provided from a location on the blog. Displaying contact form in every page is somewhat undesirable. It works great but still it is not always what we want.

What we need to do is hide this contact form gadget and use the same code to display a contact form in a separate page.

Display Contact Form in A Separate Page in Blogger

This part of the tutorial assumes that you have already followed the steps mentioned above, under the heading “Add a Contact Form Widget in Blogger Template”.

1. Go to “Template” from the links on the side and then click on “Edit HTML”. I cannot stress how important it is to be careful in this page.
2. In the template editor, you will see buttons on top. One of them says “Jump to Widget”. Click on it.
3. A drop-down will display your widget names. Click on the one that says “ContactForm1”.
4. You will reach a part in your template code. Your contact form code will start with something like:
   <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
   and end with something like:
   </b:includable>
5. Replace that part of the code entirely, from the start of the code to the end, with the following:

   <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
   <b:includable id='main'>
   <b:include name='quickedit'/>
   </b:includable>
   </b:widget>

6. Hit on “Save Template”, wait for a while and you are done editing your template.
   You just removed the display of contact form from all the pages. Now its time to add the code to a new page.
7. Again, from the links in the left, go to the one that says “Pages”.
8. Click on New Page > Blank Page.
9. In the compose area of the page, click on HTML and enter the following lines of code:

   <div class="form" style="margin-left: 40px;">
   <form name="contact-form">
   Name:
   <br />
   <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
   <br />
   <br />
   Email:&nbsp;
   <br />
   <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
   <br />
   <br />
   Message:&nbsp;
   <br />
   <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
   <br />
   <br />
   <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /> </form>
   <form name="contact-form">
   <div style="max-width: 222px; text-align: center; width: 100%;">
   <p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
   <p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
   </form>
   </div>
   </div>

10. From the “Page Settings” on the right, click on it to expand it. In the “Reader Comments” option click on “Don’t allow”, to stop people from commenting at the end of the contact page. This might confuse them.
11. Give your page a title and click on “Publish”.
12. Your new contact page is created. Don’t forget to link it from a part of your template so that your visitors can actually find it.