How to Create Contact us(Contact Form) Page in Blogger

Welcome back to another Blogger Tutorial which talks about how to create Contact us Page by adding Contact Form Widget to blogger.

add contact form at contact us page in blogger

Blogger has an inbuilt Contact Form Widget which can be added to your blog’s Sidebar. You can also create a 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 administrator’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.

Follow the steps mentioned below for adding Contact Form widget in Blogger blog.

Step 1: Add Contact Form Widget to Blogger

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

Go to Sidebar and click on Add a Gadget link on the right side.

Now click More Gadgets and look for Contact Form Widget, click on Add (+) icon to add that gadget. Then click the save button.

Now, you will see that Blogger Contact form has been added to your sidebar. If you want to hide it, you can do so in the final step.

Step 2: Create Contact Us page for blogger

Go to Pages on the left side and create a new page.

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>

Add Title such as Contact Us and change the Page setting as shown below.

Now, Finally Click on the publish button.

You have successfully created a Contact Us page for blogger.

Step 3: Adding above created Contact Us page at the navigation menu.

Go to Theme/Template and Click on Edit HTML.

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.

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 added Contact Us page in the menu bar.

Step 4: Hide Contact Form Widget from Blogger Sidebar

Now we need to Edit the Blogger Theme. Go to Theme/Template and click on Edit HTML.

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

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

div#ContactForm1 {
display: none !important;
}

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

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

Step 1: Add Contact Form Widget to Blogger

Step 2: Create Contact Us page for blogger

Step 3: Adding above created Contact Us page at the navigation menu.

Step 4: Hide Contact Form Widget from Blogger Sidebar

Leave a Comment Cancel reply