How To Add Blogger Contact Form To Contact Us Page

After publishing "Blogger Contact Form Widget Installation Guide" last week, I have been receiving several mails from Bloggers who would prefer to embed the Blogger contact form on a separate Page instead of adding it to their blog sidebars. I decided to try the trick I used in creating the "Archive" page on my blog and it worked fine.

So, if you don't want to add the Blogger contact form to the sidebar of your blog but would want it to appear on a specific page eg "Contact Us" page, then this tutorial is for you.  If you also don't want the contact form to appear on all the pages of your blog, this tutorial will also help you out. You can see a demo here.

How To Get Started

STEP 1: Create a dedicated page for the contact form

==> Log in to your Blogger dashboard at www.blogspot.com
==> Click on "Pages" > "New Page"
==> Enter "Contact Us" or anything else as the title of the Page
==> Click "Options" and select the box for don't allow comments
==> Click on "Publish"
==> Take note of the URL of this new page eg. http://www.ogbongetemplate.blogspot.com/p/request-for-template.html. You can copy it somewhere.

STEP 2: Drag the Blogger contact form widget to the main section in Layout

==> If you already have the Contact form on your blog's sidebar or footer, drag it to the main section in Layout
==> If you don't, go to "Layout" and click on "Add a gadget", click on "More Gadgets", click on "Contact Form" and Save.

Important! Drag the widget down under the posts in the main section so that it won't show up in the source code before the content.

==> After dragging it to the main section, click the "save arrangement" button.

STEP 3 : Hide the Contact Form from other pages and the main widget from "Contact Form" page

==> Back up your template!
==> Go to "Template" > "Edit HTML"
==> Click inside the html and use CTRL F to find this piece of code ]]></b:skin> or, in some templates this one ]]></b:template-skin>
==> Copy the following code and paste right under it:

<b:if cond='data:blog.url == &quot;http://ogbongetemplate.blogspot.com/p/request-for-template.html&quot;'>
<style>
#Blog1 {display:none;}
</style>
<b:else/>
<style>
#ContactForm1 {display:none;}
</style>
</b:if>

NOTE: Replace the code in red with the URL of the "Contact Us" page created earlier.

Preview and save your template.

If saved successfully, view the URL of the "Contact Us" page and you should see the contact form right there on the page. If you check your blog sidebar, you shouldn't see the contact form there anymore.

That's all.

I hope it works for you. 

NOTE: If you change your blog address after implementing this trick, make sure you update the html with the new address of the "contact us" page.