How to Add Contact us Page in Blogger using Contact Form Widget

Welcome back to another Blogger Tutorial on how to Add Contact us Page in your Blogger blog using official Contact Form Widget.

add-contact-page-in-blogger-using-contact-form-widget

Blogger has inbuilt Contact Form Widget which can be added to your blog’s Sidebar. You can also create Contact us Page using the Blogger Contact Form Widget.

There are some benefits of using Official Blogger Contact Form such as if a visitor contacts you using the Contact Form, instantly a message will be sent to author’s Email address. It has a simple interface which makes it easy for the visitors to contact you though you can customize the Contact form using CSS. 

Also Read:

Follow the complete tutorial guide in order to add Contact us Page in blogger

Add Contact Form Widget to Blogger

These steps will add the Contact Form Widget to Blogger Sidebar to make it appear on a Contact Us page.

Step 1:  Log in to your Blogger Dashboard and click on Layout.

Step 2: Click on Add a Gadget Link on the right side.

blogger-add-contact-form-widget

 

Step 3: Now click More Gadgets. You will see Contact Form Widget, click on Add (+) icon to add the gadget. Click on save button.blogger-add-gadget

Now you can see that Official Blogger Contact form has been added to your sidebar. If you want to hide it, follow the below method.

 

Hide Contact Form Widget from Blogger Sidebar

Step 1: Now we need to Edit the Blogger Theme. Go to Theme/Template and click on Edit HTML.blogger-theme-edit-html

Step 2: Place your cursor inside the code and press CTRL+F using the keyboard. Search for ]]></b:skin> in the search bar.

Step 3: Paste the below given code just above the ]]></b:skin> .

div#ContactForm1 {
display: none !important;
}hide-contact-form-blogger

Click on Save theme button. Contact Form is hidden from the Blogger Sidebar.

 

Create Contact Us page for blogger 

Step 1: Go to Pages on the left side and create a new page.Create-contact-us-page-blogger

Step 3: Switch to HTML and paste the following Contact Form HTML code in the post editor.

<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: Add Title such as Contact Us and change the Page setting as shown below.contact-us-page-blogger

Step 4: Now, Finally Click on the publish button.

You have successfully created a Contact Us page for blogger.

Add Contact Us page in the navigation menu of the theme.

Step 1: Go to Theme/Template and Click on Edit HTML.

Step 2: Now you need to paste your Contact us Page URL in the Theme as shown below. You can view your Contact page URL by clicking on View link of Contact US Page in the Pages Section.

add-contact-page-blogger

Step 3: Click on Save theme button. Hide the warning if appears.

Now you can see Contact us page at the header navigation bar. You have successfully created Contact Us page.

If you have any problem in adding the Contact Form on your blog, feel free to reach us by leaving a comment below.

Add a Comment

Your email address will not be published. Required fields are marked *

How to record Android Screen?Learn here
+