How to get Contact us and put in your Blog Page "Blogger"

If you have a Blog or Website, you also have a contact us to connect reader to the admin of Blog or Website. In this tutorial i would like to share a simple step to create a contact to the admin of site;

To test your Blog if they have connect to your email. First login to your Blogger > dashboard > layout > Add a Gadget > and in the pop up windows > More Gadgets > click + to add a gadget to your Blog.

After finish the step above try to send a message to your contact us form. Go to your Blog and go to your contact us where you put them. Go to your Email and check the inbox if the message are in your inbox. After proof if the message are in inbox, delete the Gadget. By going to Blogger dashboard > Layout > Edit the Gadget and the pop up windows show, delete or remove the Gadget.

Here the procedure to create a Contact us in your Page.

Go to Dashboard > Pages > New Page and create a Page click the HTML beside Compose and put the code here, after finish click Publish. How to put Page to Gadget.

Here the CODE and Procedure to get Blog ID.

The Blog ID is located on search Bar we have 19 Digit number. Replace the Blog ID in CODE below.

<script>
var blogId = 'BLOG ID';//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>
<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>

Now we have a Contact form, try it if working?