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.
  • Log in to your Blogger Dashboard and click on Layout.
  • Go to Sidebar and click on Add a Gadget link on the right side.


adding gadget in blogger

add contact form widget

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


contact us page title

  • 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.
add contact page to navigation menu


  • 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.
edit html blogger theme



  • 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;
}

hide contact form from sidebar


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.

Leave a Reply

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