Contact us
Previously i posted a post about blogger lunched new contact form for blogger, but many of our readers asked that how to put the contact form into specific page, so here is tutorial how to add blogger official contact form into specific page in blogger blog. Blogger have launched many features in 2013.There are two gadgets are also included in this new update. Two gadgets are Contact form and Wikipedia. Both are very useful for bloggers / webmasters. Wikipedia is for search the topic from Wikipedia and direct go to that topic from the blog. And contact form is for contractual use.

Also Read : – How to update a contact form officially released to blogger

Why we use this contact form for our blog?

  • We use this because this is blogger’s feature not other third party’s.
  • We use for the contact or feedback form.
  • It’s short and sweet.
  • It’s not taking more time to load.
  • We can customize it.
  • We can use it in page which is being learnt by us in this tutorial.
    So there are many advantages of this contact form.
  • First, Go to your blog dashboard.
  • Then click on layout tab.
  • Click on Add a gadget.
  • Then choose more gadgets from list.
  • And choose Contact Form from the gadgets list.
  • Give your choice title and save it.

Note that Do this, if you haven’t put blogger contact form on your blog.
How to

  • View your blog so you can confirm that form has been added.
  • Then, Click on template tab.
  • First Backup your template and then click on Edit HTML.
  • And seach for <b:skin> and expand it.
  • Search for </b:skin> and paste code above it.
#ContactForm1
{
display: none ! important;
}
  • Don’t change the name or anything in id because it is case-sensitive.
  • Why we have added display: none; because we have to hide the gadget which we have added to layout tab and only can see able in page.
  • Save template.
  • Then go to Pages menu.
  • Click on New page and chose Blank page.

2

  • Give your choice page title.
  • Go to Html tab from two tabes names Compose and HTML.

3

  • Then if <div dir=”ltr” style=”text-align: left;” trbidi=”on”> </div> this shown then paste below code between it. If this doesn’t exist then just paste below code on the box.
  • If you checked Use <br> tag then paste below code.

4

<form name="contact-form">
<p></p>
Name<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Email
<span style="font-weight: bolder;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Message<span style="font-weight: bolder;">*</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
  • If You checked Press “Enter” for line breaks then paste below code.

5

<form name="contact-form">
<p>
</p>
Name
<input id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p>
</p>
Email<span style="font-weight: bolder;">*</span>
<input id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p>
</p>
Message<span style="font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p>
</p>
<input id="ContactForm1_contact-form-submit" value="Send" type="button" />
<p>
</p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p id="ContactForm1_contact-form-error-message">
</p>
<p id="ContactForm1_contact-form-success-message">
</p>
</div>
</form>
  • Now you have completed this and If you want to give search description related to this then you can write on the Search Description box.

6

  • Now publish the page and enjoy. :)

Advantages

  1. It is blogger gadget so don’t worry about security.
  2. No ads in this contact form.
  3. It is free.
  4. Code it not so complex that we can’t understand.
  5. You can check by doing self entry.
  6. Unlimited Entries and simple look.
  7. Speedy to send information.