Tips Tutorial [Update] Cara Menciptakan Contact Form Blogger Pada Halaman Statis

Contact form ialah sebuah formulir yang sanggup dipakai pengunjung sebagai sarana untuk berkomunikasi secara pribadi lewat email dengan pemilik blog / Website. Secara umum formulir kontak terdiri dari beberapa kolom isian ibarat nama, email, dan pesan yang ingin disampaikan.

Keberadaan Contact form pada sebuah situs web / blog. Bisa dijadikan sebagai indikator bahwa situs tersebut mempunyai keseriusan dalam pengelolaan, sehingga sanggup meningkatkan iktikad pengguna terhadap apa yang ada di dalamnya.

Sebenarnya Blogger.com sudah menyediakan fitur / layanan formulir kontak gratis yang sanggup dipasang sebagai widget contact form di Blogspot. Tapi, tampaknya jarang sekali kita jumpai blog yang memakai widget formulir kontak. Mereka lebih menentukan untuk menciptakan contact form pada halaman statis, meskipun harus memakai layanan contact form dari pihak ketiga.

Pada tutorial kali ini saya akan menjelaskan cara menciptakan / memasang Contact Form Blogger pada halaman statis blog. Silahkan ikuti langkah-langkah berikut ini.

1. Masuk Blogger, pilih Blog yang ingin Anda buatkan halaman contact form.

2. Pilih sajian Laman (Pages), lalu klik Laman baru.

3. Buat judul laman, contohnya Contact Us, Contact Me, Hubungi Kami, atau yang lainnya.

4. Masuk mode HTML (sebelah compose), lalu copy dan pastekan isyarat di bawah ini sebagai isi Laman.

<script> var blogId = '134777113111111111'; var contactFormMessageSendingMsg ='Mengirim...'; var contactFormMessageSentMsg = 'Pesan sudah dikirim. Semoga Anda bahagia.'; var contactFormMessageNotSentMsg = 'Pesan tidak sanggup 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. Ganti isyarat yang ditandai warna merah dengan isyarat blogId milik blog Anda. Untuk mendapat isyarat tersebut, Anda sanggup melihatnya pada kafe address di halaman manapun dari dasbor blog Anda. Lihat contohnya pada gambar di bawah ini.

6. Nonaktifkan kolom komentar, lalu eksklusif publikasikan halaman contact form pada mode HTML.

7. Lihat atau kunjungi halaman contact form Anda, lalu cobalah kirim pesan untuk mengetahui apakah formulir kontak bekerja sesuai dengan yang diharapkan.

Baca juga: Cara menciptakan daftar isi blog menurut label.

---

Catatan:

• Selama proses pembuatan halaman contact us / contact form, sebaiknya Anda tidak mengubah atau bergonta-ganti mode penulisan.
• Jika Anda ingin melaksanakan pengeditan sehabis halaman contact form dipublikasikan, usahakan semoga eksklusif masuk pada mode HTML.

UPDATE!!!
Lama tidak login Blogger, ternyata banyak perubahan gres pada Blogger. Dan artikel ini salah satu yang terkena dampaknya, Contact Form Blogger tidak sanggup mengirim pesan.

Untuk mengatasi hal ini, kalian sanggup bisa gunakan salah satu dari dua cara berikut

Pilihan Pertama
Jika anda ingin memakai / mempertahankan isyarat diatas (bagi yang sudah mengikuti tutorial ini sebelumnya). Maka anda harus menambahkan widget contact form / Formulir kontak pada bab sidebar.

Kemudian tambahkan isyarat css berikut ke dalam HTML template untuk menyembunyikan tampilan widget Contact Form pada bab sidebar.

#ContactForm1{display:none;}

Dengan cara ibarat ini Blogger Contact form pada halaman sastis akan berfungsi kembali.

Pilihan Kedua
Jika anda tidak ingin menambahkan widget contact form Blogger pada sidebar atau lainnya. Silahkan hapus semua isyarat di atas, lalu ganti dengan isyarat berikut

<div class="Form"> <form name="contact-form"> <p></p> Name <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> Message <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="Send" /> <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>  <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'xxxxxxxxxxxxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dxxxxxxxxxxxxxxxxx','//bakuloreg.blogspot.com/','xxxxxxxxxxxxxxxxx'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'xxxxxxxxxxxxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script>

Selanjutnya ganti semua isyarat xxxxxxxxxxxxxxxxx dengan ID blog anda (semua ada 4).

Ganti juga isyarat //bakuloreg.blogspot.com/ dengan alamat blog anda.

Untuk catatannya sama ibarat di atas. Sekian dan gampang - mudahan tidak ada duduk perkara lagi kedepannya.