Blogging Tips and Tricks

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.

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

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

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

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

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

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

Queries or problem while installing up?