How to add a contact form page in blogger | Blogger Tutorial

Hi there!

Today we are going to discuss about how to add Contact Us form in your blog.

Adding a Contact Us form in your blog have some benefits like-

• Readers and Viewers can directly send you(admin) messages and suggestions.

• All the messages send by them will be delivered to the admin's mail instantly.

• It's simple interface make it easy for viewers to Contact you.

So, let's discuss the two methods of adding a contact form to the blog:

Method 1: Adding the Contact gadget.

Using these methods you can add the Contact gadget to your blog.

Step I : Log in to your account in blogger.com. If you are using multiple blogs then select the blog in which you want to add the Contact Us form.

Step II : Click on Layout option on the left side bar to open the layout of your blog.

Step III : Yoc can see the Add a Gadget option on the right side bar on the layout page. Clicking it will bring you the list of Gadgets.

Step IV : Click on the More Gadgets option on the left side (marked as 1st). Then, select the Contact Form gadget (marked as 2nd).

We are done adding the Contact Form. Just click on Save arrangement button on the top right corner of the layout page and then click on View Blog. You can then see the contact form on the right side bar of your blog.

Method 2: Adding Contact Form to a page on your Blog.

This method help you to add the Contact form to a new page on your blog using the customized official blogger contact form code. Just follow the simple steps.

Step I : Go to the Pages option on the left side bar (marked as 1st) and then click on New Page (marked as 2nd).

Step II : Paste the Contact Form code (given below) into the HTML editor after removing everything on the page.

The Contact Form Code:

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="widget ContactForm" id="custom_ContactForm1">
<div class="contact-form-widget">
Get in touch with us by filling out the form below.<br />
<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="" />
Email
<span style="font-weight: bolder;">*</span>
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Message
<span style="font-weight: bolder;">*</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="Send" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<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>
</div>
</form>
</div>
</div>
<div class="clear">
</div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" contactform1="" href="https://www.blogger.com/rearrange?blogID=8799058979810298021&amp;widgetType=ContactForm&amp;widgetId=ContactForm1&amp;action=editWidget&amp;sectionId=sidebar-right-1" onclick="return _WidgetManager._PopupConfig(document.getElementById(" target="configContactForm1" title="Edit">
<img alt="" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" />
</a>
</span>
</span>
<br />
<div class="clear">
</div>
</div>
</div>

Step III : Add a title, for ex. Contact Us. Change the settings as shown below.

After giving a post title (left top), click on Page settings (right top). Then, click Options. Then, select Don't allow (1st). Then, click on Done (2nd). Then, just Publish it (3rd). 

All set. You are done.

All the messages sent through this form will directly be sent to the admin mail id and all the other author's mail id connected (if any).

Important: After creating a new page and doing all the steps of pasting the codes and all, and then publishing it, if you view your blog and see that the Contact Us (or the title you gave) page is not visible in the menu bar along with the Home page button and all the other pages you have created (if any), then don't worry, just go to Layout>Find Pages Gadget>Click the Edit option on the Gadget>Then simply select the Contact Us option>Finally, Click on the Save button.

Now, view your blog. The Contact Us page will be visible next to the Home and all other pages name on the Menu bar.

That's all Friends.

Hope this article was useful. Make sure to like, share and comment. :)