Create a Contact Page Using Blogger Contact Form Widget

SOCIALIZE IT →

Tweet

---

Blogger has recently introduced a new contact form through which you can receive a message form visitors direct to your inbox. In year 2013, Blogger developer team introduced amazing new features as introduction of new html editor and Contact Form is the one which inspired me a lot. Before this widget, Blogger community was dependent on third party form provided services as foxyform, contact123 etc. This new feature on Blogger ease the Bloggers life and they can now manage better communication between owner and readers. This new function only available to add as Gadget from layout page but i am going to add this widget on Custom Contact page. First read our tutorial and follow step by step instructions to add this widget in Sidebar.

3 Steps to Follow

1. Add contact form widget in sidebar
2. Hide contact from widget from sidebar
3. Add contact form code to static page

Hide Contact Form Widget in Sidebar

After adding widget in side bar, add the following code before 

#ContactForm1{ display:none!important;}

Create a Contact Page Using Blogger Contact Form Widget

• Go to Pages

• Create New Page (or edit already created page)
• On HTML mode and Paste the following code:

<div class="form">
<form name="contact-form">
Name
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
Email*<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
Message*<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<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>

• Now Save the page.

You have done your job!!!

Hope you have added this widget to a page successfully, if you still have problem feel free to ask!

---

Follow @eHowBlogger

Author:

Zaka Ur Rahman

Get Latest Updates

For Further Reading,

Widgets