How to Create a Blogger Contact Form on a static page

Contact form is a form that visitors can use as a means to communicate privately via email with the owner of the blog / website. In general, the contact form consists of several fields such as name, email, and message to be conveyed.

The existence of Contact form on a website / blog. Can be used as an indicator that the site has seriousness in management, so that it can increase the user's trust in what's inside. 

Actually Blogger.com has provided a free contact form feature / service that can be installed as a contact form widget on Blogspot. But, it seems that we rarely find a blog that uses a contact form widget. They prefer to make contact forms on static pages, even though they have to use contact form services from third parties. 

In this tutorial I will explain how to create / install the Blogger Contact Form on the blog's static page. Please follow the steps below. 

1.Enter Blogger , select the Blog that you want to create the contact form page. 

2. Select the Pages menu, then click New page. 

3. Create a page title, for example Contact Us, Contact Me, Contact Us, or others. 

4. Enter HTML mode(nextcompose), then copy and paste the code below as the contents of the page.

<script>
var blogId = '134777113111111111';
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan sudah dikirim. Semoga Anda bahagia.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Coba lagi nanti.';
var contactFormEmptyMessageMsg = 'Bidang pesan harus diisi.';
var contactFormInvalidEmailMsg = 'Alamat email harus valid.'

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>
<div class="Form">
<form name="contact-form">
<p></p>
Nama
<br />
<input class="contact-form-name" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Email
<span style="font-weight: bolder;">*</span><br />
<input class="contact-form-email"style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Pesan
<span style='font-weight: bolder;'>*</span>
<br />
<textarea class="contact-form-email-message" style="max-width: 400px; width: 100%;" 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" onclick="sendEmailMsg()" type="button" value="Kirim" />
<p></p>
<div style="max-width: 400px; text-align: center; 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>
</div>

5. Change the code marked in red with the blog code owned by your blog. To get the code, you can see it on the bar address on any page from your blog's dashboard. See the example in the picture below.

6. Disable the comment column, then immediately publish the contact form page in HTML mode. 

7. See or visit your contact form page, then try sending a message to find out if the contact form works as expected.