How to add contact us page in blogger

Adding a Contact Us page in blogger is a very difficult task because blogger does not support plugin like wordpress .The only option left for the blogspot blogger is to add a third party help like (foxyform 123contactform,jotform) etc.

But there is a lots of drawbacks  by seeking help from these site. They post there adds with Your contact  for which not only reduces your search ranking but also slows down your speed of your website.

Why you should use official blogger form

• You page will not reload after every          message sent.
• You can customize  your contact form as you wish.
• It has a simple interface for all kind of users on phone or desktop.
• You message will be delivered 100 %,and as soon as electronicly possible.

Step 1: Firstly you have to add the contact form to your blog sidebar after and test the form that its works properly then by receiving email in your mail box after pressing  the submit button. 

Step 2: Remove the contact form from your sidebar from the sidebar .you can do this from the layout option  or from the html code view option.

Step 3:Now find out the unique id of your blog in the address bar of your blog every blog has its own blogID find this number and note it down as it will be needed  to generate code for your contact form.your blog id will look something  like this 8694494030520001234

NOW COPY THE CODE

<script>
var blogId = '8694494030520001234';//this number should be  changed according  to the need
//The message below  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>
<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=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Your Message: <em>(required)</em></div>
<textarea class='contact-form-email-message' 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' onclick="sendEmailMsg()"/>
<div style='text-align: center; max-width: 450px; 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>

=====================================

Copy this code to your new page in html mode where you want to add your Contact form  and replace my blogid with your blog id and publish the page. and go checkout your page by sending an EMAIL.

If you like this post also read my other article :::How to add facebook like box🙂🙂