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§ionId=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
Step 1: Create a Google Form for your Contact Us Page



