How to Create a Contact Form in Blogspot | the Complete Guideline

Creating a contact form in Blogger.com is always a challenge to them those who don’t have any coding knowledge. In this post we will show you how to create a contact form in BlogSpot with very little bit coding knowledge or even you don’t have any coding knowledge.

A contact page is a very important page for a website. Almost all e-commers stores like magento provides a contact form for your business enhanchment. It bring authority look and professional manner, helps to the reader to contact with the blog author and helps to create a community gradually. Moreover the search engine boot give preferences to some mandatory pages, yes the contact page is one of them. Google loves the contact page very much.

Reportedly Google announced their contact form widget to their free blogging platform Blogger.com. But the problem is you can add this widget to the sidebar of your blog but can’t use it as a new contact page.

I was facing a huge trouble to create the contact us page. If you are facing the same problem, don’t worry, I will discuss in this post step by step that how you will add the contact form widget and how you will create a new contact page in BlogSpot.

Steps to follow to Create a Contact Page in Blogger

1. Add a contact form widget to sidebar.
2. Extract the contact form code
3. Paste the code to a new page and done.

Let’s check in depth.

Add Contact form Widget to Sidebar

To activate the contact form functionalities you must have (note: Must Have) to add a contact form widget and you can do this in a very simple way.

1. Go to layout from the blogger dashboard and then add a widget like the following image.
   
2. A new window will appear like the following. Go to ‘More widgets’ and then select the ‘contact form’ widget

   

3. Now simply check your site sidebar you found a contact form. Great, Now your site traffic will able to contact with you through the contact form and the message will send to your Gmail account.

   

Extract the contact form code

Probably you are going to learn an interesting and awesome thing. I told it before that you can’t use the contact form widget as a page. You have to extract the contact form code from your blogger sidebar contact form widget just you have added.

Before doing this we will try to find some question answers like how you will extract the code and where will you post it? And how you will make it functional. Yes, finding the answers of these question is our mission now. Just follow the following steps to know the answers.

If you are curious enough, how to find the contact form code snippet do the following steps.

To do this right click up to the contact form widget and inspect it, the developer window will open at the bottom. You will find ‘inspect’ option all the browsers. Here I am using chrome please check the following screenshot.

1. Just hover over the contact form and right click and select inspect. You will find this inspecting option to every browsers. Here I am using chrome.
   
2. A window of chrome developer tool will appear at the bottom. Select the line red boxed bellow and press ctrl+C. Great, you have copied the contact form code snippet.To make it more easy to you we have extracted the code below and did some style too. Hope it will help you.
3. Now create a new page from blogger dashboard named contact us. To do this go to blogger dashboard > pages > New Page > HTMl and paste the code snippet.

Now close it and view the page. You are done. Your site has most mandatory page.

Hiding Contact form from sidebar widget

Here is an important thing need to notice that, you may don’t like the both in contact us and the contact form widget to the sidebar. But if you remove the contact form widget from the sidebar it the contact page will not functional anymore. You must have an active contact form widget at least once other than the contact us page.

So just do the following to hide (not remove but hide) the contact form widget from the sidebar.

1. Go to template from the blogger dashboard > edit HTML .
2. paste the following code before the closing tag of the head.
   div#ContactForm1 {
   display: none;
   }
   Note: We have changed the id of contact form (used contactform2) because we have hide the contact form containing an id (contactform1) through CSS from sidebar.

This is all about placing contact form widget to the sidebar and creating the contact us page.

A contact pages is not only for connecting with people but it has an SEO effects too. For Blogger platform SEO I have talked in details in here – Blogger.com SEO ultimate guide

Hope this tutorial helped you. Thank you very much.