Creating a contact page in Blogger

This is a nice addition to have your 
blog look more like a standard web site.

Having the contact page separated helps
to keep the information nicely compartmentalized.





Firstly create a "Page"

Then insert the following code into your Page while viewing in HTML view

<script>
var blogId = '=6299745683323777241';

//this number should be 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>
<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>

Change the number highlighted in red to the id of your blog.

This id can be found in the url of your blog when viewing