How To Add Blogger Contact Form To Contact Us Page

After struggling with adding blogger contact form to contact us page of my blog and finally succeeding, i decided to share with fellow bloggers who are on the blogger platform. This is for bloggers who would prefer to embed the Blogger contact form on a separate Page instead of adding it to their blog sidebars.

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 e.g “Contact Us” page, then this tutorial is for you.

(adsbygoogle = window.adsbygoogle || []).push({});

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. https://www.medratimes.com/p/contact-me.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.

(adsbygoogle = window.adsbygoogle || []).push({});

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;https://www.medratimes.com/p/contact-me.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.

If this works for you, comment below. ↧↧↧↧

(adsbygoogle = window.adsbygoogle || []).push({});

Loading...

Be the first to comment

Leave a Reply

Your email address will not be published.


*