Cara Menciptakan Contact Form Blogger Pada Halaman Statis

Baca Juga

Contact form yaitu 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 iman 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 aba-aba 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 aba-aba yang ditandai warna merah dengan aba-aba blogId milik blog Anda. Untuk mendapat aba-aba 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 pribadi 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 sesudah halaman contact form dipublikasikan, usahakan semoga pribadi masuk pada mode HTML.