Mengatasi Contact Form yang Tidak Bisa Mengirim Pesan

bungfrangki Tutorial Blog Widget Mengatasi Contact Form yang Tidak Bisa Mengirim Pesan

Tutorial blogger/blogspot kali ini yaitu tentang cara mengatasi contact form (Contact Us) yang tidak berfungsi atau dapat mengirim pesan ke email. Hal ini ditandai dengan tidak adanya pemberitahuan atau tulisan “Sending…” setelah mengklik tombol kirim. Selain itu, notifikasi yang tidak muncul lainnya ialah “You massage has been send” yang menandakan bahwa pesan telah terkirim ke email admin atau pemilik blog.

Penyebab Conact Form yang tidak bisa mengirim pesan seperti ini ialah akbiat dari custom template blogger yang cukup ekstrim dan membabi-buta, dengan menghilangkan stylesheet bawaan blogger/blogspot itu sendiri. Sehingga mengakibatkan beberapa gadget blogger tidak dapat berfungsi sebagaimana mestinya. Biasanya gadget yang tidak berfungsi ialah contact form widget dan archive widget. Hal ini dilakukan bukan tanpa alasan, fitur-fitur tersebut sengaja dihilangkan karena secara umum tidak digunakan oleh blogger kebanyakan. Fitur-fitur tersebut hanya menyumbang loading blog menjadi berat.

Baca juga: Cara Membuat Recent Post Berdasarkan Label yang Bebas dari Render Blocking

Nah, bagi anda pengguna custom template, khususnya pengguna template dari Bungfrangki.com (mulai dari Jumper Template, Simini Template, Perkasa Template dan seterusnya) coba periksa kembali contact form di blog anda. Apakah contact form tersebut berfungsi dengan baik atau tidak?. Jika tidak ada notifikasi tulisan “Sending…” dan “You massage has been send” berarti contact form tersebut bermasalah dan anda tidak akan menerima satu pesan pun dari pengunjung yang menggunakan contact form untuk mengirim pesan kepada anda.

Untuk menanggapi masalah ini, berikut caranya.

Cara mengatasi formulir kontak yang tidak dapat mengirim pesan

Sebelum meneruskan tutorial ini, alangkah baiknya anda juga menyimak artikel tentang Cara Memasang Contact Us pada Halaman Statis Blog, jika contact form anda berada di halaman static. Namun, jika contact form anda berada di sidebar maka perlakuannya pun berbeda (akan dijelaskan di bawah).

Solusi untuk contact form dihalaman statis

Untuk membuat contact form di halaman statis, kita perlu kode pemanggil, contohnya seperti ini:

<div dir="ltr" style="text-align: left;" >
Silahkan isi form di bawah ini untuk menghubungi kami. Jika tidak ada halangan dan kesibukan lainnya, kami akan langsung merespon dengan cepat pesan yang Anda kirimkan.
<br />
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br />
<div class="clear">
</div>
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

Kemudian tambahkan kode berikut ini tepat di bawah kode </form>

<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'] = '6871833555178132779';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6871833555178132779','//www.bungfrangki.com/','6871833555178132779');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar3', 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': '6871833555178132779', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Perhatian:
Ganti kode 6871833555178132779 dengan nomor blog ID anda. Dapati dilihat dengan cara seperti ini:

Sehingga hasilnya (gabungannya) menjadi seperti ini.

<div dir="ltr" style="text-align: left;" >
Silahkan isi form di bawah ini untuk menghubungi kami. Jika tidak ada halangan dan kesibukan lainnya, kami akan langsung merespon dengan cepat pesan yang Anda kirimkan.
<br />
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br />
<div class="clear">
</div>
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<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'] = '6871833555178132779';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6871833555178132779','//www.bungfrangki.com/','6871833555178132779');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar3', 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': '6871833555178132779', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
</div>

Setelah itu klik Perbarui untuk menyimpan.

Solusi untuk contact form di sidebar

Untuk memperbaiki contact form yang tidak bisa mengirim pesan di sidebar, anda cukup meletakkan kode berikut ini di atas kode </body> atau </body>

<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'] = '6871833555178132779';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6871833555178132779','//www.bungfrangki.com/','6871833555178132779');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar3', 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': '6871833555178132779', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
</div>

Ganti kode seperti yang sudah ditunjukkan sebelumnya.

Lalu simpan template. Jangan lupa cek kembali contact form tersebut apakah sudah berfungsi sebagaimana mestinya.

Update:

Ada cara yang lebih simple.

Untuk lebih mudah, alias tidak perlu gonta-ganti kode ini-itu lagi, silahkan letakkan kode berikut ini di atas kode </body> atau  </body>

<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://www.blogger.com/static/v1/widgets/2759014865-widgets.js\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != "undefined" && BLOG_attachCsiOnload != null) { window["blogger_templates_experiment_id"] = "templatesV1";window["blogger_blog_id"] = "<data:blog.blogId/>";BLOG_attachCsiOnload(""); }_WidgetManager._Init("//www.blogger.com/rearrange?blogID\x3d<data:blog.blogId/>","<data:blog.url/>","<data:blog.blogId/>");
_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": "<data:blog.blogId/>", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
</script>

Simpan theme.

Itu saja, semoga membantu.