Cara Membuat Halaman Form Kontak di Blogspot

Membuat Halaman Form Kontak di Blog

TERKUAK.COM - Kontak form pada sebuah blog menurut saya sangat penting, karena dengan adanya halaman tersebut anda dan para pengunjung blog dapat melakukan interaksi secara pribadi. Entah itu berkaitan tentang konten, saran hingga kontribusi untuk blogspot anda.

Dengan memiliki halaman kontak, akan menambah kesan profesional pada situs blog anda di blogspot. Selain itu halaman kontak juga sebuah syarat wajib bagi anda yang ingin mendaftar adsense di blog anda.

Sedangkan untuk cara membuat halaman kontak di blogspot sangat mudah, walaupun anda baru membuat blog di blogspot sekalipun pasti akan berhasil. Karena, cara ini sering saya lakukan untuk membuat form kontak di blogspot saya yang lainnya.

Langkah Membuat Form Kontak di Blogspot

Anda hanya perlu melakukan tiga langkah untuk membuat halaman form kontak di blogspot, seperti berikut ini:

Dapatkan ID blog Anda

Untuk mendapatkan ID blog sangat mudah, anda hanya perlu login ke dashboard blogger kemudian lihat pada address bar browser, anda akan melihat URL kira-kira seperti ini:

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

Angka yang saya tandai diatas itu merupakan ID blog blogspot anda, silahkan copy dan simpan di notepad anda.

Kode Form Kontak Blogspot

Copy kode form kontak dibawah ini, kemudian simpan ke notepad atau aplikasi text editor lainnya:

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

Setelah itu ganti tulisan 1234567890, dengan ID blog anda yang sudah anda silahkan sebelumnya dan ganti www.azhealthy.eu.org/ dengan alamat blog anda.

Buat Halaman Baru

Langkah terakhir anda harus membuat halaman baru yang untuk menampilkan form kontak di blog blogspot anda.

  • Login ke dashboard Blogger.com.
  • Pilih blog yang akan kita tambahkan contact form.
  • Pilih menu Halaman > klik icon + (plus)
  • Isi judul halaman, seperti Contact Us atau semacamnya.
  • Pada tampilan editor pilih mode HTML.
  • Silahkan copy-paste kode form kontak yang anda simpan dan sudah di rubah ID blog.
  • Jika sudah silahkan anda Publikasikan.
  • Selesai...

Tampilan kontak form kira-kira seperti ini: Demo Form Kontak.

Selanjutnya silahkan anda lihat halaman form kontak yang sudah anda buat tadi, apakah berhasil atau tidak. Saya yakin 100% sukses, jika anda melakukan dengan benar terutama perubahan pada ID blog dalam kode tersebut.

Nah, mungkin saya akhiri tutorial singkat tentang Cara Membuat Halaman Form Kontak di Blogspot. Semoga dapat bermanfaat terutama bagi anda yang sangat baru membangun blog di blogspot.
See you...

You may like these posts