How to Add Contact Form in Blogger the Simple Way

How to Add Contact Form in Blogger

If you are starting a blog/website first and foremost important page you need to add is Contact Us Page or Contact Us Form. You might not know the importance of it, but I can tell you there are many benefits of adding one – like,

1. Your Visitors can contact you.
2. You can get prospective leads from your clients.
3. Can be contacted by your competitors for support.
4. Contact by sponsors for advertising or promotion and much more.

So let’s get into the point. Today I am going to walk you through step by step process of adding a contact form in blogger as it is a tedious task.

I am going to show you two methods in which you can add contact us form in blogger using Official Blogger Method and Easy Google Forms Method.

Method 1: Official Blogger Method

This is the official blogger method referred by blogger.com. In this method, you don’t have to use any third-party applications and it’s all done inside your blogger dashboard. It consists of three steps

Step 1: Creating a Gadget inside layout Tab

1. Navigate to blogger.com and Log in to your Blogger Dashboard.
2. Select the blog you wish to create a contact us page.
3. On the Blogger Dashboard(Left Sidebar) click on layout tab to add the gadget.

4. Now add a gadget from the sidebar of layout tab by clicking on it, you will get a popup window of all the available gadgets where you can find Contact Form gadget.

5. Click on + icon next to it, this will navigate to configure contact form widget. Now check the box show contact form and name the title as a contact form and click save.

6. This will add the widget to the sidebar of your blog.

Step 2: Hiding the widget from Sidebar

You can skip to Step 3 if you have checked the box show contact form in the new version of blogger.

1. As the widget is added to the sidebar of your blog. You need to hide the widget from the sidebar in this step
2. On the blogger dashboard click on Theme Tab.
3. On the theme tab click on Edit Html button. This will open up a Theme code window of your blog.

4. Now use the command [control +F] to search for the required code ]]> and press enter.
5. Once you identify the code, paste the following code just before ]]> code.
6. The code is as follows

div#ContactForm1 { 
display: none !important; 
}

7. Click on save theme to save your changes.

Step 3: Adding Contact Form HTML code to Contact Us Page

Now its time to create a separate page in our blog and add the Embed HTML code.

1. Navigate to Blogger Dashboard and click on Pages Tab.
2. Create a new page by clicking on New page.

3. Name the page as Contact Us and add the required opening content in the compose section window (if necessary).
4. Now switch to html mode by clicking HTML Button and add the following html code below the opening content(if added).

5. The html code is as follows:

<div id=”custom_ContactForm1″ class=”widget ContactForm”>
<div class=”contact-form-widget”>
<p>Get in touch with us by filling out the form below.</p>
<div class=”form”>
<form name=”contact-form”>
<p></p>
Name
<br>
<input type=”text” value=”” size=”30″ name=”name” id=”ContactForm1_contact-form-name” class=”contact-form-name”>
<p></p>
Email
<span style=”font-weight: bolder;”>*</span>
<br>
<input type=”text” value=”” size=”30″ name=”email” id=”ContactForm1_contact-form-email” class=”contact-form-email”>
<p></p>
Message
<span style=”font-weight: bolder;”>*</span>
<br>
<textarea rows=”5″ name=”email-message” id=”ContactForm1_contact-form-email-message” cols=”25″ class=”contact-form-email-message”></textarea>
<p></p>
<input type=”button” value=”Send” id=”ContactForm1_contact-form-submit” class=”contact-form-button contact-form-button-submit”>
<p></p>
<div style=”text-align: center; max-width: 222px; width: 100%”>
<p id=”ContactForm1_contact-form-error-message” class=”contact-form-error-message”></p>
<p id=”ContactForm1_contact-form-success-message” class=”contact-form-success-message”></p>
</div>
</form>
</div>
</div>
<div class=”clear”></div>
<span class=”widget-item-control”>
<span class=”item-control blog-admin”>
<a title=”Edit” target=”configContactForm1″ onclick=”return _WidgetManager._PopupConfig(document.getElementById(“ContactForm1″));” href=”//www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1″ class=”quickedit”>
<img width=”18″ height=”18″ src=”//img1.blogblog.com/img/icon18_wrench_allbkg.png” alt=””>
</a>
</span>
</span>
<div class=”clear”></div>
</div>

6. Click on publish button to save your changes.

Important Note: Always make sure you turn off commenting for this page so that users don’t comment here. Don’t forget to add your Contact Us page to your menu so that it can be accessible to all your users on the menu bar.

Method 2: Easy Google Forms Method

This method is one of the easy methods to add contact form in blogger using google forms.

Step 1: Create a Google Form for your Contact Us Page

1. Login to Google Forms using your Gmail account.

2. Click + icon to create a New Form.

3. Name the form as Contact Us and add any description you would like to add followed by fields required.

4. Now add 3 fields Name, Email ID as short answer type and Message as Paragraph type.

5. Navigate to response tab and click on three dots icon and check to Get email notifications for new responses.

6. Click on the settings tab on the top right corner of the screen – under General section uncheck all the boxes and navigate to presentation tab and edit confirmation message if you want to and click save.

7. Click on SEND button on the top right corner of the screen.

8. A popup window appears and asks you the way how to collect email addresses. Make sure you check the box collect email addresses.

9. Click on < > button in the send via column.

10. This will show you the Embed HTML code using iframe. Copy the code for further use.

Step 2: Adding Embed HTML to your blogger Contact Us Page

We are ready with the form that has been designed using google forms. Its time to jump into your blogger.com dashboard.

1. Navigate to Pages Tab and add a New Page.

2. Name the page and switch to HTML editor and replace existing code with embed code from google forms.

3. By switching again to compose tab you can see the actual view of your designed google form.

4. On the right sidebar click on options and select Don’t Allow reader comments.

5. Click Done and Publish the page.

In order to display this contact form on a separate page go to Layouts Tab and in the pages widget click on edit button and a popup window appears. Make sure to choose Contact Form from the list and save changes.

You have successfully added the form to your blog in blogger.

Also Read:

1). Understand Custom Robots Header Tags Settings in Blogger.

2). How to Submit Your Blog Sitemap to Google

Manoj Reddy

Hello Everyone. Myself Manoj Reddy, I am a Writer and Blogger Since 2016. I have written 100+ Articles and have generated Targeted Traffic. Through this blog, I wish to help many fellow bloggers in every step of their Blogging Journey and build a passive income stream from their blog.