Receive More Updates

Date: - Time:

Friday, 30 September 2016

New Way To Add Beautiful Contact Us Form Page In Blogger Using Mobile Phone Or PC

Are you a blogger and has not added contact us page in your blog? It is a very good thing for a dedicated blogger to have this feature in his/her blog because it is through this medium, users will be able to communicate easily with the blog administrator concerning any issue, suggestions or bugs found in the website for proper fix or help depending on the particular services you provide for your audience on your blog.

Some bloggers loved to find third party websites to provide this feature for them E.g foxyform, jotform, 123contactform E.t.c so today, you will be able to add it in your blog easily and in a very simple and understandable way.

Read also: Top 20 Best Article Rewriters Tools For Bloggers - Copy And Paste Is Over!

It delivers very fast, the simple interface will allow users to make use of it everyday, the entire page will not get reloaded for sending the message, it is very easy and simple.

How to add contact us form page in blogger

Follow these steps below and get it added Instantly;

STEP 1: Just open your Blogger>>Layout>>Add Gadget and then click on MORE GADGETS at the left side then click on CONTACT FORM and Save it. As shown below;

STEP 2: After that, then click on Template>>Edit HTML then look for <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'> hmmm it will be at nearly the bottom of your codes, if you are using PC just press ctrl f and paste it, immediately it will be shown then click the three dots and it will open so the code will be like this below;

Just delete the ones in yellow color below;

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

So you will be left with;

<b:includable id='main'></b:includable>

Then click on SAVE TEMPLATE.

Read also: Do Google Adsense Always Reject Your Application, See Perfect Solution!

STEP 3: So after that, just go to Template>>Customize>>Advanced>>Add CSS and paste this code below;

.contact-form-widget {
width: 600px;
max-width: 100%;
padding: 0px;
color: #000;
.fm_name, .fm_email {
.fm_message {
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
.contact-form-email-message {
max-width: 100%;
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;
As shown below;

Then Click on SAVE.

STEP 4: So after that, you can now click on PAGES>>NEW PAGES then use HTML and paste this code below in the big box. As shown below;

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

So after that, then click on SAVE. Then you can now view it and immediately, you have successfully added a contact us page to your blogger. As shown below;

So keep blazing!
Is it helpful? Do you encounter any problems or issues while adding this contact us page form to your blogger? Kindly ask more questions and if it works for you kindly share your experience!


  1. Chai, at last I have added the contact us you blazer! You are the best !

  2. This comment has been removed by the author.

    1. Lolzzz you are funny ooo, you mean I should write novel for you?

  3. This comment has been removed by the author.

  4. tried it but it is not showing blazer

    1. You didnt follow it up properly;

      Just add a gadget called Contact Form and then go to your template, then locate and open it, then delete all codes inside and you will be left with so after that, save your template and create a new page called CONTACT US and switch to HTML then paste the code. So go back and view that page, immediately it will show.


Is this post helpful?

Your comment(s) are highly appreciated to this post. Be the first to comment and make sure you also share to your friends and families about this post, for them to also benefit from it.

Share to all social networks like Facebook, Twitter and others social network you may know.

Are you finding it difficult to drop a comment here? Kindly click here and learn how to comment on