how to show contact form in contact us page Blogger

blogger give you the gadget to show the contact form on your blog. with this contact form, anyone can easily contact you. when someone sends you a message through this contact form the message will be land to your Gmail account. and you can also show this contact form in you contact us page. this post is about how to show contact form in contact us page.

how to show contact form in contact us page Blogger

Show contact form in contact us page.

1. go to the blogger.com and sign in your account.
2. now create a new page or edit a page that you already have.
3. click on the HTML tab. for editing your page in HTML editor.
   
4. now paste the following code into the text box. change blog id with your blog id.
5. and click on the publish button.  

<script>
var blogId = '85245846795586625';
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: <em>(required)</em></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<br />
<div>
Your Message: <em>(required)</em></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" style="height: 524px; margin: 0px; width: 610px;"></textarea>
<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> 

How to find your blog id?

finding your blog id is really easy.  to find your blog id just log in your blogger account. select your blog. and see in the address bar of your browser.  in the URL of your blog dashboard, you will see blogID=12345678925 the number are your blog id.
example your blog dashboard URL is the blogger,com/blogger.g?blogID=85245846795586625#overview/src=dashboard. the numbers in the red area are your blog id just copy your blog id and replace with 85245846795586625 in above script.