Update 2019 Cara Membuat Contact Form Blogger pada halaman statis

Wartawankampung.com - Contact form adalah sebuah formulir yang bisa digunakan pengunjung sebagai sarana untuk berkomunikasi secara pribadi lewat email dengan pemilik blog / Website. Secara umum formulir kontak terdiri dari beberapa kolom isian seperti nama, email, dan pesan yang ingin disampaikan. Untuk itu sebelum ini saya sudah membuat beberapa solusi mudah untuk membuat contact blog pada blog AMP HTML. Namun bagi pengguna Blogger tentu saja belum apdol jika tidak menggunakan contact form bawaan Blogger. Untuk itu saya terus berusaha untuk mencari cara memasang contact form Blogger pada halaman static blog AMP HTML.

Salah satu caranya untuk memasang contact form pada blog AMP yaitu dengan menggunakan amp-iframe, dan kebetulan saya sudah menemukan cara mudah untuk menampilkan amp-iframe agar tetap dimuat walaupun di simpan di sebelah atas.

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

Sebenarnya Blogger.com sudah menyediakan fitur / layanan formulir kontak gratis yang bisa dipasang sebagai widget contact form di Blogspot. Tapi, sepertinya jarang sekali kita jumpai blog yang menggunakan widget formulir kontak. Mereka lebih memilih untuk membuat contact form pada halaman statis, meskipun harus menggunakan layanan contact form dari pihak ketiga.

Pada tutorial kali ini saya akan menjelaskan cara membuat / 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 menu Laman (Pages), kemudian klik Laman baru.

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

4. Masuk mode HTML (sebelah compose), kemudian copy dan pastekan kode 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 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. Ganti kode yang ditandai warna merah dengan kode blogId milik blog Anda. Untuk mendapatkan kode tersebut, Anda bisa melihatnya pada bar address di halaman manapun dari dasbor blog Anda. Lihat contohnya pada gambar di bawah ini.

6. Nonaktifkan kolom komentar, kemudian langsung publikasikan halaman contact form pada mode HTML.

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

UPDATE!!!

Lama tidak login Blogger, ternyata banyak perubahan baru pada Blogger. Dan artikel ini salah satu yang terkena dampaknya, Contact Form Blogger tidak bisa mengirim pesan.

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

Pilihan Pertama

Jika anda ingin menggunakan / mempertahankan kode diatas (bagi yang sudah mengikuti tutorial ini sebelumnya). Maka anda harus menambahkan widget contact form / Formulir kontak pada bagian sidebar.

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

#ContactForm1{display:none;}

Dengan cara seperti 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 kode di atas, kemudian ganti dengan kode 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 kode xxxxxxxxxxxxxxxxx dengan ID blog anda (semua ada 4).

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

Untuk catatannya sama seperti di atas. Sekian dan mudah - mudahan tidak ada masalah lagi kedepannya.

Alasan kita menggunakan blog baru untuk contact form ini karena contact form Blogger harus dibuat di blog Blogger, artinya kita tidak bisa menghosting sendiri kode-kodenya.

Namun meskipun menggunakan blog lain, tetapi pesan akan tetap dikirim pada inbox Admin, itu intinya.

Nah silahkan Anda buat blog baru khusus untuk contact form ini dan kemudian aktifkan HTTPS nya. Kemudian silahkan masuk ke menu Template atau Theme lalu non aktifkan mobile theme-nya.

Terimakasih telah mengunjungi salah satu ulasan artikel dari WartawanKampung.com dan jangan lupa kunjungi atikel terbaru dari kami sehingga tidak ketinggalan informasi terbaru yang sayang untuk tidak mengetahuinya. Wassalam

Share this post