HOW TO ADD A CONTACT PAGE WITH CONTACT FORM TO BLOGGER BLOG

Having a contact page with a contact form on your blog is more than necessary as your blog readers can easily reach you via this channel. If you are not that ok showing your email address on your blog, then this wonderful contact form with simple coding can serve as an easy way for your readers to get in touch.

Adding a contact form to a contact page on Blogger can be done with a simple tricks. Blogger actually offers a free contact form, but they made it as a Gadget that  can be placed on layout page. And to me, that is not the best place for it to be, it should be situated on its own page. So here’s how to set it up.

Adding a Contact Form to Blogger Blog

»First, go to Page on your blogger Dashboard and click create new page.

»From the Page form, write "Contact Us" on the page title and click HTML to change the page box to HTML format.

»From the HTML box that show up, copy the below code and put it inside the box.

<div dir="ltr" style="text-align: left;" trbidi="on">
<script>
var blogId = '3921567248826250638';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Sending...';
var contactFormMessageSentMsg = 'Your message has been sent.';
var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';
var contactFormEmptyMessageMsg ='Message field cannot be empty.';
var contactFormInvalidEmailMsg = 'A valid email is required.'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>

<br />
<form name="contact-form">
<div>
Your Name : </div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<br />
<div>
Your Email: <i>(required)</i></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<br />
<div>
Your Message: <i>(required)</i></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
&nbsp; &nbsp; &nbsp;&nbsp;
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Send" />

<br />
<div style="max-width: 450px; 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>
</div>

»After, change the Blog ID to your blog id to receive the message on your mailbox.

You can locate your Blog ID at the address title bar when opening the new page. Take a look at the screenshot above to locate your 19 digits to configure your contact form.

 »After changing the blog id, click "Publish" to bring your New page to live. If there is any question or questions, kindly use the comment box below.