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.
Mengatasi Contact Form yang Tidak Bisa Mengirim Pesan

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:
Mengatasi Contact Form yang Tidak Bisa Mengirim Pesan

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 &lt;!--</body>--&gt;&lt;/body&gt;

<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 &lt;!--</body>--&gt; &lt;/body&gt;

<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) != &quot;undefined&quot; &amp;&amp; BLOG_attachCsiOnload != null) { window[&quot;blogger_templates_experiment_id&quot;] = &quot;templatesV1&quot;;window[&quot;blogger_blog_id&quot;] = &quot;<data:blog.blogId/>&quot;;BLOG_attachCsiOnload(&quot;&quot;); }_WidgetManager._Init(&quot;//www.blogger.com/rearrange?blogID\x3d<data:blog.blogId/>&quot;,&quot;<data:blog.url/>&quot;,&quot;<data:blog.blogId/>&quot;);
_WidgetManager._RegisterWidget(&quot;_ContactFormView&quot;, new _WidgetInfo(&quot;ContactForm1&quot;, &quot;footer1&quot;, null, document.getElementById(&quot;ContactForm1&quot;), {&quot;contactFormMessageSendingMsg&quot;: &quot;Sending...&quot;, &quot;contactFormMessageSentMsg&quot;: &quot;Your message has been sent.&quot;, &quot;contactFormMessageNotSentMsg&quot;: &quot;Message could not be sent. Please try again later.&quot;, &quot;contactFormInvalidEmailMsg&quot;: &quot;A valid email address is required.&quot;, &quot;contactFormEmptyMessageMsg&quot;: &quot;Message field cannot be empty.&quot;, &quot;title&quot;: &quot;Contact Form&quot;, &quot;blogId&quot;: &quot;<data:blog.blogId/>&quot;, &quot;contactFormNameMsg&quot;: &quot;Name&quot;, &quot;contactFormEmailMsg&quot;: &quot;Email&quot;, &quot;contactFormMessageMsg&quot;: &quot;Message&quot;, &quot;contactFormSendMsg&quot;: &quot;Send&quot;, &quot;submitUrl&quot;: &quot;https://www.blogger.com/contact-form.do&quot;}, &quot;displayModeFull&quot;));
</script>

Simpan theme.

Itu saja, semoga membantu.
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K
Free and premium blogger templates