Creating Contact form in a page.

By Jovel Sam on 21:11 in Blogger, Contact Form, HTML

Blogger introduced a contact form for blog. This can be added as a widget. In this tutorial i'm gonna show how to add this as a Page of blog.

Step 1 : Go to blogger and select the the blog you want to add the contact form, From the left tabs select pages tab and select blank page from new page.

Step 2 : Click the 'Edit HTML' Tab.

Step 3 : Add this code in it .

<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://joe-amis.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdWgvbcdCCvk2ixC7WL_SDmT90Qcv-aGazppQNCc1WsCt1gZ583adR7SzDWrnDY6JehyphenhyphensfWKD_L9bcNtPD7VVFTOT0DwmI0H-NMkwh65a-MX70x6YKpGHUpnn_uFg7mL8blVBpNi7DBTZb/s1600/logo+copy.png" width="59" height="29" /></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>

Next step is to register this.
For that Go to Blogger->Template->Edit HTML
Paste this code before </html> Tag.

<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 your blog id With the Black Coloured Text.
I'll be creating a new post on checking your blog id.
And Enjoy.

Popular Posts