Membuat Contact Form Responsive di Blogger

Apa itu contact form ?

Kotak pesan ke admin/pengelola web atau blog sering juga disebut dengan Contact Form. Kotak pesan ini berfungsi sebagai sarana komunikasi bagi pengelola web atau blog. Secara umum kontak pesan ini terdiri dari Nama pengunjung, Email pengunjung dan Pesan yang hendak disampaikan oleh pengunjung.

Script Contact Form yang saya bagikan ini sudah responsive, artinya akan menyesuaikan dengan lebar layar gawai dari pengunjung. Berikut penampakannya

Bagaimana cara pemasangannya di blog ?

Tanpa berlama-lama, ikut langkah demi langkah pemasangan Contact Form ini. 
  • Masuklah ke akun blogger anda.
  • Buatlah sebuag halaman/page dengan nama terserah anda, disini saya contohkan "Contact" seperti yang ada di situs ini.
  • Masukkan script berikut pada mode html.
 <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> 

  • Ganti tulisan hijau discript tersebut dengan id blog anda, cara tinggal anda lihat di address bar dihalaman maupun dari dashboard blog anda. Perhatikan gambar dibawah ini :
  • Nonaktifkan kolom komentar, kemudian langsung publikasikan halaman contact form pada mode HTML.
  • Lihat atau kunjungi halaman contact form Anda, kemudian cobalah kirim pesan untuk mengetahui apakah formulir kontak bekerja sesuai dengan yang diharapkan.

Demikian tutorial singkat bagaimana membuat Contact Form di blog. Semoga apa yang saya bagikan dapat bermanfaat bagi rekan-rekan semua. 

Rekomendasi artikel untuk anda :

Kembali ke atas

Ayo bagikan artikel ini biar temanmu juga tahu!