How to add contact us page in blogger

In this article, I will show you how to add contact us page in blogger. Yes, professional contact-us page in blogger like you sees in the WordPress or other websites. All over the world, people use blogger platform to write the article and share their thought with other. Blogger is a free and easy platform to make a blog but in blogger main drawback is contact us page, you cannot make professional contact us page easily in blogger.

So let’s start step by step to make one.

Add contact us gadgets

Step 1. Log in into your blogger platform, navigate through blogger menu option and click on     Layout.

Step 2. After clicking on Layout option, you can see your template layout section, in this click on add a gadget in the sidebar right.


Step 3.  When you click on add a gadget you can see a new pop up window is open scroll down to find contact us gadget click on that and add into your sidebar right.


Contact us gadget will be added in a sidebar but not in a page. In the next section, we will hide contact us gadget in a sidebar and added to our page. For this, we make some changes in our template before doing this make sure backup your template file.

Step 4. In a blogger, menu clicks on Theme you can find just below in Layout option.

Step 5. After click on Theme click on Edit HTML. After clicking you can see your template HTML code. You can make some change on that.


Hide contact us gadget in sidebar.

Step 6. For hiding click on code section and Search ]]></b:skin>.
To searching press ctrl+F, you can see input section is open on the input area type ]]></b:skin> on it and press enter button on your keyboard. 

Step 7. Paste the flowing code just above the ]]></b:skin>. You can see on the image we provided.



After adding make sure click on the save theme button. Now contact us gadget will be hiding in the sidebar area. In the last and the main step, we create contact us page in blogger.

Also Read : How can add Category and subcategory in WordPress permalink

Create Contact us page

Step 1. Navigate to blogger menu options click on the page option and create a new page.


Step 2. First click on the HTML it will convert the page into HTML editor. Now paste the given code into that area.


This code has two section one is CSS and second are HTML. The benefit of this code you can customize this code according to you.

CSS code


HTML code

<div class="tb-contact-form-widget">
<form name="contact-form"> 
<div class="form-name"> 
<i class="fa fa-pencil-square-o"></i> Your Name: <br /> 
<input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
</div> <div class="form-email"> 
<i class="fa fa-envelope-o"></i> E-mail Address *: <br /> 
<input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<div style="clear: both;"> 
</div> <div class="form-message"> 
<i class="fa fa-keyboard-o"></i> Message *:<br /> 
<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5">
</textarea><br />

 <div class="srbtn"> 
<input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<input class="btn-reset" type="reset" value="Clear" />

<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div>
 <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div>

 <h3> Our Social Sites</h3>
 <ul class="b-social-buttons"> 
<li><a class="btn-lg" href=""><i class="fa fa-twitter"> 
<span class="network-name">Twitter</span>
 <li><a class="btn-lg" href="">
<i class="fa fa-facebook"> <span class="network-name">Facebook</span></i>

Select all CSS and HTML code and paste in your page area.

Step 3. Last click on the publish button to save the page and voila you have done it.

Also Read : What is SEO and how it’s work - A step by step process

 I hope this article helps you to add contact us page in your blogger website. If you face any difficulties please comment us. We happy to help you.
How to add contact us page in blogger How to add contact us page in blogger Reviewed by TechnoBush on October 08, 2018 Rating: 5


  1. We are truly thankful for your blog entry. You will discover a great deal of methodologies in the wake of going to your post. I was precisely scanning for. A debt of gratitude is in order for such post and please keep it up.  digitalisieren

  2. I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much. best led tv under 25000 rs


Home Ads

Powered by Blogger.