Official Blogger Contact Form Gadget Released



Blogger Contact Form
Word about Google working on a official Contact Form gadget started to go around when many Blogger developers start to encounter some code in the Blogger hosted CSS and JavaScript files which clearly indicated that a Official Contact Form gadget was on the way. Finally today after a long wait of 14 years , Blogger has released the new Contact Form gadget which will surely ring a death knell for third party contact form providers


How To Add It 

1. Go to the Layout Tab of your Blog

layout tab

2. Click the Add a Gadget button

add a gadget


3. Click on More Gadgets


gadget menu


4. Click on the Contact Form Gadget

configure contact form


5. Give it a appropriate title and Save it

Its Features

contact form example


> Sending simple text messages
> No Support for attachments ( Will be likely added in the future )
> Custom CSS Styles can be added easily
> All code is escaped before sending ( Cannot send any HTML via the message )

This new gadget release comes with the recent updates announced Google I/O 2013 and it looks like Blogger is still a integral part of the Google's Product line.


Written by Prayag Verma

A self proclaimed Blogger Evangelist. He has been blogging for the past 4 years and likes to help people having problems with Blogger . Get more from Prayag on and Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment

Happy to know that, thanks.

Awesome widget but we can't add custom field in this form. Is there any way by which we can add this widget to static blogger page ??


AntiSpam Protection:
does not exist

Just add this HTML to your contact Page and the contact form should appear

<div class='widget ContactForm' id='ContactForm1'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p></p>
Name
<br/>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p></p>
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=''/>
<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' type='button' value='Send'/>
<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>
</div>
</div></div>


and also add this JavaScript after the body tag (I know this is against the rules of HTML but it is the one of the way to ensure that widgets.js file is loaded before this snippet of code - You can also load this snippet asynchronously if you want )

<script>
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebartab1', 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': '8293397653821925164', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'http://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script>

Hi there

It would be a really awesome if it existed but we can just wish that Google is working on one

satish said...

Yah this gadget is very useful to track the customer pulse . Thanks to google and thanks to this website admin for intimating tis kind of information to all