Web Analytics

How to add a contact us page on the blogger.com blog?

Affiliate Disclosure – NitinOffers.COM content is free. When you purchase through referral links on this site, we earn a commission. Learn more.

Let us see how to create a Contact Us page on blogger.com. Blogger.com is Google’s free product where anyone can create their own blog and if they do well, monetize it and earn money online. Now if you use your blog for yourself or for everyone there are some pages that should be added which are necessary for any blog and website like about, contact, disclaimer, terms & conditions, etc. In this article, we understand how to add a contact us page on blogger.

At least three things are required on the Contact Us page on the website or blog, such as the name of the contact, email id, and message. Apart from this, you can also add other things as per your requirement like mobile number, address, the reason for contact, etc.

How to add a contact us page on a blogger’s blog?

How to add a contact us page on a blogger?

Step 1 – Go to blogger.com, login and go to layout then click on Gadgets. Now search the contact form and add and save.

how to create a contact us page on the blogger com blog?

Step 2 – See the above image and understand that you have to click on the theme or template. Only on 1 or 2 clicks do you have to click on Edit HTML. Now you will have the code of theme or template installed on blogger and some options will be given above. In which the first option is to access the widget or gadget. So you click on that ‘jump to widget’ and click on contactform1.

contact us page on blogger
<b:widget id='ContactForm1' locked='false' title='Contact' type='ContactForm'>...</b:widget>

Step 3 – On clicking ContactForm1, you will come to the code of the connect form where you will see the code given below or a similar code. Then you will see the number in the same line as well and there will be an arrow in front of it by clicking on it to open the code further. Now if you have to edit something in this code, then you will see or read it carefully.

<b:widget id='ContactForm1' locked='false' title='Contact' type='ContactForm'> <b:includable id='main'> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p/> <data:contactFormNameMsg/> <br/> <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/> <p/> <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span> <br/> <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/> <p/> <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span> <br/> <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/> <p/> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/> <p/> <div style='text-align: center; max-width: 222px; width: 100%'> <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/> </div> </form> </div> </div> <b:include name='quickedit'/> </b:includable> </b:widget>

Look at the beginning and end of the red color code given in this code because it will have to delete the entire red color code. Keep in mind that this red color code will be in the normal color on your screen and not in red color. Save after deleting the code.

how to add a contact us page in blogger’s blog?

Step 4 – Now we will go to create a new page. Click on the above image Ansar New page and name it Contact Us and copy and paste the code given below on the page and publish it. After doing this, the contact us page will be added on blogger.com.

<div class="widget ContactForm" id="ContactForm1"> <div class="contact-form-widget"> <div class="form"> <form name="contact-form"> <div class="fm_name"> Your Name:</div><div class="fm_name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div><div class="fm_name"><br /></div> <div class="fm_email"> E-mail Address *:</div><div class="fm_email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div><div class="fm_email"><br /></div> <div style="clear: both;"> </div> <div class="fm_message"> Message *:</div><div class="fm_message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea></div><div class="fm_message"><br /></div><div class="fm_message"> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" /> <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> </div> </form> </div> </div> </div>

Now there are more steps ahead which are not necessary to follow, but if you do not want to allow this page to be indexed on Google, then you can save by clicking on Custom Robots Tags on the right side by clicking on noindex, nofollow.

A contact form on blogger’s blog.

You can also add a search description if you want. Add a search description only if you do not want the contact us page to appear on Google. Now any visitor wants to contact you, then he will have to write his name, email id and message, only then he will be able to contact otherwise.

Where does the message contacted by the visitor go?

If anyone leaves a message by contacting us page, then that message comes on our email id on which we are using blogger.com.

Read this also.

  1. @Blogger – How to create a free blog or a website?
  2. How do I change my blog from Blogger to WordPress?

Leave a Comment

Your email address will not be published.