How To Add a Contact Form and Create a Contact Us Page in Blogger

Are you looking for a step-by-step guide to add a contact form?

Yes?

Then you will learn how to add a contact form in Blogger here.

The contact page is what a reader of your blog, an advertiser, sponsor, or someone with a general inquiry would use to contact you.

Beginners will find BlogSpot (Blogger) an ideal tool for learning the basics of blogging and understanding how it works.

Blogger users can use a contact form in their widgets, but they cannot be added to pages. Newbies have a problem with this.

AdSense, as well as most other ad networks and affiliate marketplaces, won’t accept you if you don’t have a contact, about, and privacy page.

As soon as you start your blog, make sure you create these pages.

This tutorial will help you to add a contact form to your BlogSpot blog and create a contact us page. It is easy to do this, I will show you two ways.

Using a third-party tool is one method, and using an official Blogger “contact us” gadget is another. The choice is yours.

Method No. 1 – Using 123FormBuilder

This is my favorite tool for creating any type of form for any non-WordPress site.

123FormBuilder (previously 123 ContactFormBuilder) is a cloud-based application for building any type of online form, managing workflows, and collecting data.

Including BlogSpot and WordPress, it works on all CMS platforms.

Step 1: Go To 123FormBuilder and Create A Free Account

Step 2: Select the arrow to the right of The Create A New Form Button. Click on the contact form & Lead form option.

On the next page will appear a contact form that is ready for use. Clicking on the fields button will allow you to add any additional fields you wish.

Save and publish your work.

Step 3: Copie the javascript code from the screen. Press the CTRL+C key.

Step 4: Click on the Add a new page button on your Blogger blog dashboard. Title it “Contact Us.”.

Step 5: Press CTRL + V to paste the code into the HTML format editor and click publish.

You now have a contact form on your blog. Check it out.

Now let’s move on to our second method

Method 2 — Customizing the “Contact Us” Gadget on Blogger

A contact us gadget is available in the Blogger Gadgets section, but it cannot be used on your pages. It can only be accessed through sidebars. Use the tutorial below to customize it for use on pages.

Step 1 – Navigate to the Layout tab in your Blogger dashboard.

Step 2 – Click on the add new gadget link.

Step 3 – Click on the “Add” button after choosing the “contact us” gadget from the menu. Uncheck the visible box and save the gadget.

Step 4 – Create a new page on your blog. The name of the page should be “Contact Us.” Copy the following HTML code and paste it into the HTML editor on this page:

<div id=”custom_ContactUsFromForBlogSpotBlogger” class=”widget ContactForm”>

<div class=”contact-form-widget”>

<p>Please fill in the form below to get in touch with us.</p>

<div class=”form”>

<form name=”contact-form”>

<p></p>

Your Name

<br>

<input type=”text” value=”” size=”30″ name=”name” id=”ContactForm1_contact-form-name” class=”contact-form-name”>

<p></p>

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

Your 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=84427382819377482&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>

Note: If you are using BlogSpot, your blog’s original ID can be found by visiting your BlogSpot dashboard and looking at your URL in the browser’s address bar. Here is how it looks:

If you have a contact us page, remove the comments and make sure it is accessible via your menu.

Congratulations! You now have a live contact us page. Check out your contact form and use it.

Conclusion

This is a step-by-step guide on how to add a contact form in Blogger. Friends, you must know that if you can shift to WordPress then you don’t need to add coding.

I recommend you to shift to WordPress, only you need one hosting.

I think this article is helpful for you. Then you can comment below.

Author bio:

Hi, I am Indrajeet, 16 years old Blogger & founder of UniqeBlog. Where you can learn about blogging and find the best deals with an honest review.