How to add contact form (contact us page) in blogger


In this article, I will show you how to add contact form (contact us page) in blogger. Yes, professional contact-us page form in blogger like you sees in the WordPress contact us form or in other professorial 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 form in a separate 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 form 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 form gadget click on that and add into your sidebar right.


Contact form gadget will be added in a sidebar but not in a page. In the next section, we will hide contact form gadget in a sidebar and added to our blogger contact us 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.

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



Hide contact form 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 form 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.

Must Read: How to add Facebook messenger in blogger

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.


  1. I’m excited to uncover this page. I need to to thank you for ones time for this particularly fantastic read !! I definitely really liked every part of it and i also have you saved to fav to look at new information in your site. tech news


Please enter your comment!
Please enter your name here