Cara Memasang Widget Contact Form di Laman / Pages Blogspot

Contact Form adalah widget yang berfungsi untuk memudahkan pembaca blog untuk berkomunikasi dengan pemilik atau penulis Blog. Biasanya widget ini memiliki fitur sederhana yaitu Nama, Alamat Email dan isi pesan.

Hampir semua jenis Blog memiliki fitur Contact Form dengan fitur yang hampir mirip. Untuk jenis blog Wordpress fitur ini dapat di pasang di semua menu baik itu widget maupun menu Pages namun untuk blog jenis Blogspot saat ini hanya dapat di pasang di menu Widget saja.

Pada umumnya Contact Form digunakan pada menu Pages atau Laman karena tampilan simpel, karena itu bagi pengguna Blogspot perlu melakukan sedikit modifikasi untuk dapat memasang widget ini. Apa sebetulnya pentingnya widget Contact Form? Jawabannya adalah jika blog menggunakan Google Adsense menu ini wajib ada. Jika Blog tidak menggunakan Adsense maka widget Contact Form tidak wajib ada. Contoh dari penggunaan widget  Contact Form dapat dilihat di menu Contact pada Blog Saya.

Selain berfungsi sebagai sarana berkomunikasi widget Contact Form juga menjadi pemanis tampilan Blog agar telihat profesional. Berikut ini cara mudah memasang widget Contact Form ke dalam menu Pages atau laman pada Blogspot.

Setiap Blogspot memiliki Blog ID untuk membedakan dengan blog lainnya. Untuk melihat BlogID caranya adalah masuk ke menu dasbord blogspot. Pada bagian atas atau URL akan ada tulisan yaitu blogID berupa 19 digit angka. Untuk lebih detailnya dapat dilihat pada gambar dibawah ini. Contoh blogID untuk blog yang Saya gunakan adalah blogID=5306780364273139773.

Ada dua cara untuk memasang  Widget Contact Form di Laman / Pages Blogspot. Namun Saya akan menggunakan cara termudah saja, cara lainnya hampir sama namun agak sedikit rumit karena harus masuk ke template Blogspot.

Langkah pertama Silakan copy terlebih dahulu BlogID tersebut simpan di notepade. Jika sudah silakan lanjutkan tahapan berikutnya dengan mengcopy kode Script berikut ini.

<script>var blogId = '5306780364273139773';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan Anda telah dikirim.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Silakan coba lagi nanti.';
var contactFormEmptyMessageMsg ='Kolom pesan tidak boleh kosong.';
var contactFormInvalidEmailMsg = 'Sebuah email yang valid diperlukan.'

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><br />
<br />
<form name="contact-form">
<div>
Nama Anda : </div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<br />
<div>
Email: <em>(wajib)</em></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<br />
<div>
Pesan: <em>(wajib)</em></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" style="height: 238px; margin: 0px; width: 430px;"></textarea><br />
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />

<br />
<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

Jika sudah silakan silakan masuk ke menu Laman atau Pages Blogspot kemudian buat laman baru. Pastekan kode Script diatas dengan posisi HTML bukan Compose. Tampilan dari kode Script diatas jika sudah di posting akan seperti dibawah ini.

Nama Anda :

Email: (wajib)

Pesan: (wajib)

Silakan ganti BlogID yang berwarna merah diatas dengan kode BlogID Anda. Jika sudah silakan tekan menu Publish atau Publikasikan.

Untuk melihat pesan yang masuk dari widget Contact Form silakan lihat di email Gmail pada menu Sosial. Untuk nama pesan yang masuk adalah Blogger Contact From. Contohnya seperti pada gambar dibawah ini.

Selain cara di atas juga dapat menggunakan bantuan pihak ke-3. Biasanya untuk pihak ke-3 ini lebih lengkap menunya, dapat disertai gambar juga. Contoh dari penggunaan menu Contact Form dengan bantuan pihak ke-3 dapat di lihat di Blog Toyota Indonesia. Pihak ke-3 yang digunakan pad ablog tersebut berasal dari situs Email me form. Penjelasan detail memasang Contact Form dengan pihak ke-3 akan Saya bahas pada artikel berikutnya.

Demikian tutorial cara memasang Widget Contact Form di Laman / Pages Blogspot jika ada pertanyaan silakan sampaikan dalam kolom komentar kita diskusikan bersama. Selamat mencoba.