.
.

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.

10 comments:

  1. Thanks Ogbonge Blogs. This information is very useful for me. Hopefully I will get more information or your blog. If you do not mind, you can visit my blog to discover the latest places to eat, the best in Vietnam. My blog: Diemanuong365.blogspot.com

    Thanks a lot...

    ReplyDelete
  2. tnx boss,nice post.i will sure try it out

    ReplyDelete
  3. I still prefer the third party contact forms to this, blogger should add more features and make it more unique.

    thanks for the post.

    ReplyDelete
  4. thanks alot, i just addded it on my blog, simply easy, thanks you.

    ReplyDelete
  5. Nice info. though i already hv a contact form in my blog and i really like it. Pls ogbongeblog, how do u get this ur rad more button. i want mine to be like urs. thanks...

    ReplyDelete
  6. Please how can i contact you via email?

    ReplyDelete
  7. Hello Jide. I've tried this method but can't seem to find what or where the code is. Seems blogger has done some changes. Please I need update as I'm stuck here. Thanks.

    ReplyDelete
  8. thumbs up for you mr Jide, you're a great man, i have added it to my blog. thanks man

    ReplyDelete

We love to hear from you!

If your comment is unrelated to this post, please use our Contact page.

Want to be notified when I reply your comment? Tick the "Notify Me" box.

THANKS.