Cara Membuat Contact Us (Contact Form) di Halaman Statis Blog Tanpa Ribet

Membuat form contact us pada blog merupakan salah satu cara agar pengunjung bisa menjalin komunikasi dengan pemilik blog/website. Seperti yang telah saya singgung dalam artikel saya sebelumnya mengenai hal-hal penting yang harus diperhatikan agar blog diterima Adsense, pada poin ke 5 saya sangat menyarankan untuk menyediakan halaman kontak atau contac us pada menu navigasi blog.

Dengan adanya contact form, sebuah blog akan dinilai sebagai blog yang dikelola secara profesional baik dimata Google maupun pengunjung blog. Di samping itu keberadaan halaman contact us juga bisa dijadikan alat untuk membangun list building untuk blog anda selain tentunya dengan membuat subscribe box.

Sebenarnya sudah banyak tutorial di internet mengenai cara memasang contact form (contact us) ini, Anda bisa membuat contact form melalui widget yang disediakan Blogspot atau menggunakan jasa layanan pihak ketiga seperti situs 123contactform.

Cara Memasang Contact Us di Blog Dengan Mudah

Tetapi kali ini saya akan memberikan panduan cara membuat halaman contact us yang lebih simpel. Anda tinggal memasukkan kode yang akan saya berikan di bawah ke dalam halaman yang anda buat.

Silahkan simak langkah-langkahnya berikut ini :

1. Silahkan buka dashboard akun Blogger Anda

2. Pilih Page/Laman > New Page

3. Isilah Judul terlebih dahulu pada kolom judul yang tersedia, misalnya "Contact Us", agar nanti URL bisa bisa sesuai dengan yang Anda inginkan, yaitu https://www.namabloganda/com/p/contact-us.html

4. Pada menu di sebelah kiri ada pilihan Compose dan HTML, silahkan pilih HTML

5. Kemudian copy kode di bawah ini ke dalam kolom halaman kosong yang tersedia

<form name="contact-form">
Nama<br /><input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value=""/><br/><br/>Email Address <span class="wajib">*</span><br/><input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value=""/><br/><br/>Pesan <span class="wajib">*</span><br/>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br/>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim"/><br/>
<div class="formb"><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'] = '4386883124899281681';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4386883124899281681','//panduaneka.com/','4386883124899281681');
_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': '8866800899420715293', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
<style type="text/css">
#ContactForm1{display:none}a.showcontent{display:none}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{
width:300px;height:auto;margin:5px auto;padding:10px;background:#fff;color:#666;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px 0;padding:10px;background:#fff;color:#666;font-family:'Droid Sans',sans-serif;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none; border-color: rgba(81,203,238,1);box-shadow: 0 0 5px rgba(81,203,238,0.7)!important;color:#444;background:#fff;}
#ContactForm1_contact-form-submit {font-family:Open Sans Condensed, sans-serif;float:left;border-radius:3px;
background:#07ACEC;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;
padding:5px 10px!important;font-weight:700;font-size:15px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.4s ease-out;}
#ContactForm1_contact-form-submit:hover {background:#444;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:450px;margin-top:35px;}.formb{max-width:22px;text-align:center;width:100%}.wajib{color:red;font-weight:bold}
</style>

Catatan :

Silahkan Anda ganti tulisan yang diblok Kuning

4386883124899281681 dengan ID blog Anda. Silahkan lihat pada ID Blog Address bar browser (Lihat gambar dibawah ini)

Ganti  //panduaneka.com/ dengan domain blog Anda

6. Kemudian klik Publish.

Demikian panduan cara membuat contact us/contact form di blog semoga bermanfaat dan Happy Blogging