Creating a Contact Me page for Blogger Blog

Creating a Contact Me page for Blogger Blog

Blogger has added a new widget in their widget page. This widget is a Contact Me widget which allows blog visitors to contact you.

This can be added in your blog sidebar or footer. In this tutorial I will tell you to how to add this to a blog page.

Create a blank page from Blogger -> Pages -> New Page -> Blank Page

Toggle to tab HTML and paste these code in the HTML textarea :

<div class="contact-form-widget">
<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="" />
Email
<span style="font-weight: bolder;">*</span>
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
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><br />
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /><p style="display: inline-block;">Powered By <a href="http://sag-3.blogspot.com">Subins Blog</a></p>
<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 we have to register the widget to make it work properly. To do that Go to Template -> Edit HTML and scrollto the bottom of the code and paste the following code before </html>

<script>
_WidgetManager._RegisterWidget(_ContactFormView, new _WidgetInfo(ContactForm1, lowerbar2, null, document.getElementById(ContactForm1), {contactFormMessageSendingMsg: Sending..., contactFormMessageSentMsg: Your message has been sent., contactFormMessageNotSentMsg: Message could not be sent. Please try again later., contactFormInvalidEmailMsg: A valid email address is required., contactFormEmptyMessageMsg: Message field cannot be empty., title: Contact Form, blogId: YOUR BLOG ID, contactFormNameMsg: Name, contactFormEmailMsg: Email, contactFormMessageMsg: Message, contactFormSendMsg: Send, submitUrl: http://www.blogger.com/contact-form.do}, displayModeFull));
</script>

Replace the Wheat color background text above to your blog id. See this post to see how you can find blogger blog id.

When a user submits the Contact Me form you will get a mail from Blogger like this :

download
alternative link download