How to add Contact Us Form on Blogger? - Blogger Contact Form

WordPress users can easily add a contact form to their blog (in contact us page) via easy to install plugins. But what about Blogspot users?

Well, I’ll say no need to worry! But Why?… Because today I’m gonna share, an easy to follow guide on how to add a contact form to Blogger.

After reading this post, you will be able to add a custom form to the Contact Us page in Blogger.

Before getting into this, let us discuss some of the top benefits of adding Contact Form to your blog.

Benefits of Adding Contact Form to your Blog

Here are some of the top benefits of adding a contact form to your blog contact page:

• Contact form makes it easier for your visitors to send messages.
• It looks more professional than an email address.
• Contact Forms can easily prevent spammers from mailing you.

In this way, a contact form is always a better option. Now let us know how to add a Contact form in Blogger.

How to add Contact Form in Blogger?

I’ve divided all the steps into two main parts. All you have to do is to follow both parts accordingly.

Part 1: Adding & Hiding Contact Widget [Blogger Contact Form]

Part 1 is tedious. You have to first add a Contact Widget to your blog & then have to hide it. It’s a little confusing, but following the below steps you can easily do it:

1. In your Blogger dashboard, visit the Layout section.

2. Click on Add a Gadget in the sidebar & add Contact Form widget.

After you successfully added Contact Form widget to your Blog Sidebar follow the next two steps:

3. Click on Template from the left menu & next Edit HTML.

4. Now in the Edit HTML page, you have to click on “Jump to Widget” and then select “Contact Form 1” from the list of Widgets.

5. After you Hit Contact Form 1, you will be directed to the HTML code of Contact Form widget. Next, you have to delete the Contact form code from the HTML.

6. You have to delete the code between <b:includable id=’main’> and </b:includable>. You can take the help of below screenshot!

The code between <b:includable id=’main’> and </b:includable> looks similar to the below code:

<b:include name='widget-title'/>
  <b:include name='content'/>
</b:includable>
<b:includable id='content'>
<b:include name='widget-title'/>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:crmNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
</div>
</form>
</div>
</div>

7. Search for ]]></b:skin> in your blog HTML by using Ctrl + F.

8. Add the below code just above ]]></b:skin>

/* Contact Form by TheTechsOff.com*/
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 400px;
max-width: 50%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 50%;
max-width: 50%;
margin-bottom: 10px;
height:30px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 80%;
height:200px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #f9f9f9;
background: #1aeb00;
color: #222;
width: 100%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #f56c7e;
color: #444;
border: 2px solid #222;
}

Follow the below screenshot:

Part 2: Adding Contact Form to Contact Us Page [Blogger Contact Form]

In order to add Contact Form to your Contact Us page, you have to copy the below code & page it into your Page HTML section. Follow the below steps:

1. Create a new page named Contact Us. Copy the below HTML code & paste it right into the HTML section of the page. (Scroll Down to See Image)

>You can Contact Us via the below form:</p>
<!-- Thetechsoff.com Contact Form -->
<style>
.page-contact-form input,
.page-contact-form textarea {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.page-contact-form input.contact-form-button.contact-form-button-submit {
padding: 10px;
background: #000; /* Button background color */
color: #fff; /* Button text color */
border: none;
}
.page-contact-form input.contact-form-button.contact-form-button-submit:hover {
background: #777; /* Button background hover color */
color: #fff; /* Button text hover color */
}
</style>
<br />
<div class="contact-form-widget page-contact-form">
<div class="form">
<form name="contact-form">
Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-mail: <span id="required">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Message: <span id="required">*</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div><p><a href="https://www.thetechsoff.com/" style="visibility:hidde;">The Techs Off</a></p>

</div>
<!-- End Contact Form Code --></div>

Follow the below image:

2. After you hit the Update button, you can view the Contact Form in your Contact Us page. In my theme the contact form looks like the one shown below:

That’s it!