How to add blogger official contact form to a page of blogger blog?

In the previous post, we have learnt about the new updates of blogger.
Blogger have introduced two more widgets which names contact form and second one names Wikipedia. Blogger have also introduced many features in 2013.
If you want to put the contact form in a specific page, then it’s a different thinking then others.
But not impossible.

How to put this awesome widget to blog page?

# Go to your blog dashboard and click on layout tab.
# Click on Add a Gadget and choose More Gadgets and click on Contact Form. And give your choice Title and Save it. Note : Do this only if you haven’t put this blogger contact form on your blog.
# Then click on template tab and first Back up your template. Then click on Edit HTML and Search for <b:skin> and expand it.
# Then search for </b:skin> and paste below code above it.

#ContactForm1
{
display: none;
}

# Don’t change this because it’s case-sensitive.
# Save the template.
# This display: none; will work to hide the gadget which you’ve added to layout tab.
# Then go to your blog dashboard’s Pages tab and Click on New page and choose Blank Page.
# Give page Title as your choice.
# And click on HTML tab. [From Two tabs Compose and HTML].
# And between <div dir=”ltr” style=”text-align: left;” trbidi=”on”> </div> this paste below code.
# If HTML tab is empty then paste below code on the box.
# Paste Below code if you selected Use <br> tag.

Click to zoom
<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>

# Paste Below code of You checked Press “Enter” for line breaks.

Click to Zoom
<form name=”contact-form”>
<p>
</p>
Name
<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>
<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>
<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>

# Write on search description if you want to write.
# Now publish the page.
# Now, You have completed successfully.

How can we use this?

We can use this as contact us page or advertisement contact page etc.
This is very helpfull and great feature by blogger.
If anyone entry in this form then blog’s owner means owner’s mail will receive it via blogger mailing service.

If anyone have problem while doing this?
Just comment or Contact us.

Share This Now:

23 Comments

Add a Comment

Your email address will not be published. Required fields are marked *