How to Create a Contact Form Page on Blogspot

MIUSM-TECH.COM - The contact form on a blog in my opinion is very important, because with this page you and blog visitors can interact personally. Whether it's related to content, suggestions to contributions to your blogspot.

By having a contact page, it will add a professional impression to your blog site on blogspot. In addition, the contact page is also a mandatory requirement for those of you who want to register for adsense on your blog.

As for how to create a contact page on blogspot, it's very easy, even if you are just starting a blog on blogspot , it will definitely work Because, this way I often do to create a contact form on my other blogspot.

Steps to Create a Contact Form on Blogspot

You only need to do three steps to create a contact form page on blogspot, as follows:

Get your blog ID

To get a blog ID is very easy, you just need to login to the blogger dashboard then look in the browser address bar, you will see a URL that looks something like this:

https://www.blogger.com/blog/posts/1234567890

The number I marked above is the ID of your blogspot blog, please copy and save it in your notepad.

Blogspot Contact Form Code

Copy the contact form code below, then save it to notepad or other text editor application:

<div class='ContactForm' id='ContactForm1'>
  <form name='contact-form'>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-name'><b>Nama kamu</b></label><input class='contact-form-name' id='ContactForm1_contact-form-name' placeholder='Enter your name' name='Nama' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email'><b>Email kamu</b><span>*</span></label><input class='contact-form-email' id='ContactForm1_contact-form-email'placeholder='e.g. anda@gmail.com' name='email' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email-message'><b>Apa yang ingin Anda sampaikan kepada kami?</b></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message'placeholder='Tulis sesuatu....' name='email-message'></textarea></div>
    <div class='input-area'>
      <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' /></div>
    <div class='notif-area'>
      <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>

<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1234567890';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d1234567890','//www.azhealth.eu.org/','1234567890');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Mengirim pesan...', 'contactFormMessageSentMsg': 'Terimakasih telah menghubungi kami. Pesan Anda telah berhasil dikirim.', 'contactFormMessageNotSentMsg': 'Pesan tidak dapat dikirim karena kesalahan. Silahkan coba lagi.', 'contactFormInvalidEmailMsg': 'Silahkan masukkan alamat email yang valid.', 'contactFormEmptyMessageMsg': 'Isi pesan tidak boleh kosong.', 'title': 'Contact Form', 'blogId': '1234567890', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script>

After that, replace the text 1234567890 , with your blog ID that you have previously requested and replace www.azhealthy.eu.org/ with your blog address.

Create New Page

The last step you have to create a new page to display the contact form on your blogspot blog.

• Login to Blogger.com dashboard .
• Select the blog that we will add the contact form to.
• Select the Page menu > click the + (plus) icon
• Fill in the page title, such as Contact Us or something.
• In the editor view select HTML mode.
• Please copy-paste the contact form code that you saved and changed the blog ID.
• If so, please publish .
• Done...

The contact form looks something like this: Demo Contact Form .

Next, please see the contact form page that you created earlier, whether it worked or not. I'm sure 100% success, if you do it right especially the changes to the blog ID in the code.

Well, maybe I'll end a short tutorial on How to Create a Contact Form Page on Blogspot . Hopefully it can be useful especially for those of you who are very new to building a blog on blogspot.
See you...