How To Add A Contact Form - Contact Page In Blogger Step By Step

Contact form in a blog is a way of communication between you the blogger and your audience. If your audience read an article from your blog site and in the event that they don’t understand anything they may wish to contact you. The best way to do that is through the “contact us” page. The blogger platform is owned by Google and hence it is automatically connected to your Gmail account. If someone writes a message and hits the send button, you will receive the message right in your Gmail inbox.

A contact page is how generally a reader of your blog or an advertiser, sponsor or someone with a general query would reach you through. BlogSpot (Blogger) is an ideal choice for beginners to learn the basics of blogging and understand how it works. BlogSpot users can use a contact form in their widgets, but you cannot add them to the pages. This is a problem for newbies.

Adsence, including most of the other quality ad networks, and affiliate marketplaces won’t approve you to join them if you don’t have an about, contact and a privacy policy page. So make sure you create these pages as soon as you start your blog. In this tutorial, I’ll help you to create a contact us page and add a contact form in your BlogSpot blog. Blogger Gadgets section has an official contact us gadget, but you cannot use it on any of your pages. It’s only accessible through sidebars. Follow this tutorial below to customize it for using it on pages.

Adding a contact us form in Blogger is a wearisome undertaking as it does not sustain plugins like WordPress. What most of the Blogspot bloggers does is to seek the help of third-party sites (foxyform, jotform, 123contactform, etc.). But today, you are going to learn how to add the official contact us page in Blogger. It is possible to get third-party codes to be inserted in new pages. Yet, the official contact form is far better than those.

You can add forms to a static Blogger page like contact me, or post a form as event registration. There are lots of possibilities on using your forms since Blogger enables you to inject custom HTML codes on their platform.

Other Tutorials:

How To Add Breadcrumbs Post Navigation In Blogger Step By Step - New!

How To Add Custom Robots.txt File In Blogger Step By Step - New!

How To Add Twitter Cards To Blogger And Wordpress Step By Step - New!

How To Create A Blog On Blogger.com (Blogspot) Step By Step - New!

How To Set Custom Header Tags For Blogger Blog Step By Step - 4 Steps - New!

The Benefits of Official Blogger Contact Form

• You will get the message as soon as one sends it. And, the deliverability is 100% as well.
• The simple interface makes it easy for 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.

I have divided this tutorial into three sections, adding the contact gadget, hiding it and implementing the official code on a new page.

Section 1: Adding the Contact Gadget

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

Step 1: Visit blogger.com and log in to your account. If you are running multiple blogs, you need to choose the desired blog from the list.

Step 2: Click on Layout from the left sidebar to get an option to add gadgets. Click on “new gadget”. See the infographic below for more information.

Step 3: Clicking on it will bring you to a list of gadgets. Scroll down and you see "

Contact Form
Add a contact form to your blog.

By Blogger

Click on the + sign to add the contact form gadget from the list of gadgets. Blogger has updated its platform, there is more gadget anymore! See the infographic below for more information.

Step 3: If you click on + sign, the contact form window will pop out, here, you can change the title (the default title is "contact form" you may change it "Contact Us" or any other of your convenience and click on "save" after you finished editing the title. See the infographic below for more information.

Step 4: Save the arrangement, after you have added the contact form, you can see the contact form in the layout section after you have added it. See the infographic below for more information.

Now that you have added the contact form gadget, I would like you to see how it is live on your blog before we move to the second section of the tutorial how to add a contact us page in blogger. So now go to the upper right section of your blogger dashboard and click on "view blog". See the infographic below for more information.

It will take you to a new tap of your browser, there you will see how the contact form appears on your blog. See the infographic below for more information. I am taking my time in this tutorial for you to see and understand everything clearly, in the event that you don't grasp something, don't forget to leave at the comment section below this article or contact me through the contact us page! Note! This is a demo blog so there are no posts.

The way the contact form appears on the blog is not nice, so what we will do is to hide it. This brings us to the second section of the tutorial, how to add contact page on blogger blog.

Section 2: Hiding the Contact Form Gadget

Now, you are going to learn how to hide the contact form gadget. There are two ways you can hide the contact form gadget from your blog. 

1. The first method is to customize the template through the advance tap and add some CSS codes to customize your template. 
2. The second is to edit the template by adding some CSS codes

If you don't understand anything here, don't worry, I am here for you, just follow this tutorial how to add contact page on blogger blog step by step.

Method 1: The Customization Method Of Hiding The Contact Form On Blogger Blog

Step 1: Go to Theme>>Customise

See the infographic below for more information.

Step 2: Clicking on "customise" will take you to the "Blogger Theme Designer" page. Now go to Advanced>>Add CSS  See the infographic below for more information.

Step 3: Add the CSS code below to the space that appears after you click "Add CSS" after that click on "Appy to Blog" to customize it. After that go back to blogger and view your blog.

div#ContactForm1 {
display: none !important;
}

See the infographic below for more information.

Now you will realize that when you go back to blogger, the contact form has vanished from your blog. Don't worry, just follow the tutorials!

Method 2: Hiding the contact form by editing the template with the same CSS code

Step 1: Go to Theme>>Edit HTML 

Step 2: You will be provided with the whole code of your blog in a large field.

Search for ]]></b:skin> and place the code given below just before it.

If you don't know how to do it don't worry I am taking you through this tutorial step by step. Click inside the template and press ctrl +F keys on your keyboard simultaneously. This action will trigger a search box to appear at the upper right part of the template codes. Copy and paste this code ]]></b:skin> inside the search box and press enter on your keyboard. Copy and paste the following code just before it. Note, in some blogger themes or templates you will not find the above code rather you will see this   <b:skin>   paste the following code before it. Now save the template. If you view your blog, you'll realize that the contact form is no more. We will add it to a page, so don't worry!

div#ContactForm1 {
display: none !important;
}

Section 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>>New page.

Step 2: Paste the following code into the HTML post editor after removing everything in it.

Give your contact page a name example "Contact Us" Do not allow comment on this page and hit "Publish"

This is the code

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

Let us deal with another issue here, if you have not added a "Page Gadget" to your blog the contact page will not show on your blog or if you have not ticked or selected the contact gadget in the page setup, it will also not show on your blog. Follow the tutorial to do it! Note, if you've already added the "Pages" Gadget, just go and edit it, tick or select the Contact Us page to be shown.

Step 1: Go to Layout>>Cross-column add gadget, just below the blog header and click on add gadget.

Step 2: A window will pop up, scroll down and find the "Pages" gadget from the list of gadgets.

Step 3: Another window will pop up, on this window, tick all the pages you would like to show on the "Pages" Gadget, the ticked gadget will move or show at the right as you tick, indicating that it has been ticked or selected. Don't forget to hit the save button when done with ticking or selection!

Now you are done, go to your blog and you'll see your "Pages" gadget with your ticked or selected pages. You can also test your contact us page with your email and password, the message will be delivered right to your inbox.

I hope you now know how to add contact us page in blogger. If you find any difficulty like zero deliverability even after the success message, I recommend reinstalling the Contact widget. Don’t forget to share this post with your blogger friends.

full-width