How To Add Contact Form (Contact Us Page) in Blogger?

Hey folks let's look into one of the important detail of keeping good response with your readers/visitors through your blog site. Today we will be tackling the Contact Form Widget/Plugin.

This post was originally posted in bloggertipstricks and i just saw the necessities of sharing it with my buddies.

Adding a contact us form in Blogger is somehow a challenging task as it does not support plugins like WordPress. What most of the Blogspot bloggers do is to seek the help of third-party sites such foxyform, jotform, 123contactform and the list goes on and on. Anyways today, we are going to learn how to add official contact us page in Blogger and you gonna enjoy this folks.

It is possible to get third-party codes to be inserted in new pages just like snap,,,bingo!. Infact, the official contact form is far better than those.

Okay First Let's See What Are The Benefits of Official Blogger Form

• You will always get the message as soon as a person sends it. 

• The simple interface makes it easy for the visitors to contact you.

• If you know Cascade Style Sheet (CSS) language, it will be easy for you to customize the form as per your liking.

• The entire page will not get reloaded for sending the message.

• The tutorial has been divided into three sections, adding the contact gadget, hiding it and implementing the official code in a new page.

Part 1: Adding the Contact Gadget

Follow the steps given below to add a contact us gadget on your blog.

Step 1: Visit www.blogger.com as always and please log in to your account. Choose the desire if you have many blogs in you account.

Step 2: Click on Layout from the left sidebar to get an option to add gadgets.

Step 3: You will see an Add a Gadget link on the main panel on the right side. Click on it to bring you to a list of gadgets.

Step 4: On this step, choose More gadgets from the left side and you will see Contact Form then click to add it.

Part 2: Hiding the Gadget

Now, let's see how to hide the contact gadget.

Step 1: Now here is bit of job since we need to work with HTML. Click on the template button.

Step 2: Proceed and click on Edit HTML and you will be provided with the whole code of your blog in a large field.

Step 3: OK, here click anywhere inside the HTML section then press CTRL+F at once, You will see a search section appearing at the top right of you HTML code. Paste in this code  ]]></b:skin> and press Enter. Place the following code just before it.

div#ContactForm1 {
display: none !important;
}

Done, click Save to retain the changes.

Part 3: Adding Contact Form to a Page

You will get the customized official blogger contact form code here to be added to be shown on a separate page.

Step 1: Go to Pages and click on New page as shown in the image below

Step 2: On posting we have two options, the compose and the HTML. Click on HTML option instead and paste the following code in the HTML section after removing every written code in it.

<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>

Step 3: Choose title (e.g Contact Us) and then change the settings given right as given below.

Step 4: Final and last step, click the Publish button and you are all set up.

N/B  Messages sent from this contact form will always be delivered to the admin email. If the blog has more than one admin be sure all of them will get them thus making it good for team work.

So guy am signing off here to signup for the next post...Hope to hear from you and if you are having difficulties please use the comment box below....See yaaah Folks.