How to add contact Us page on your blog

Every blog need a Contact Us page. There is widget call contact us which can be used as contact form in your blog. You can implement Contact us widget as slide bar or where it can be placed in layout. But If you want to add separate page for contact us There are plenty of third party websites which provide contact us page for you.

There is a tricky way to implement own contact us page on your blog. Please follow steps to implement own contact us page

1).Login your blogger account using corresponding google credentials

2). Select the blog which you want to add contact us page using select pages option

3). Create New page and select html option

4). You have to implement blog page html code in your blog page html code space

and you should replace blogger id by own blogger id which is unique for every blog.

You can easily find your blog id It is pretty simple when you add new page you can see the url that url query string has appended blogger id

https://www.blogger.com/blogger.g?blogID=1843927276578562394#editor/target=page

5).Please use copy given code and paste on your contact us page html view

<script>
//you should replace this blogid by your blog id
var blogId = '1843927276578562394';
//You can customize bellow 5 strings meaningful way
var contactFormMessageSendingMsg ='Sending Message...';
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>

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container-fluid">

<form name='contact-form'>
 
<label>Your Name:</label>
<input id='ContactForm1_contact-form-name' class="form-control" name='name'  type='text' value='' placeholder="Name" />



<label>Your Email:<em>(required)</em></label>
<input  id='ContactForm1_contact-form-email' class="form-control" name='email' size='30' type='text' value='' placeholder="Email Address"/>


<label>Your Message:<em>(required)</em></label>
<textarea  id='ContactForm1_contact-form-email-message' class="form-control" name='email-message' rows='5' placeholder="Message" ></textarea>

<p></p>
<input class='btn btn-info' id='ContactForm1_contact-form-submit' type='button' value='Send' onclick="sendEmailMsg()"/>

</br>
</br>

<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>

</form>
</div>

6). When complete above steps you are done creating contact us page that you can use any where in blog as your page in blog.(please make sure use your own blog id unless contact us page will not work)