Cara Menciptakan Contact Us (Contact Form) Di Halaman Statis Blog Tanpa Ribet

Membuat form contact us pada blog merupakan salah satu cara semoga pengunjung dapat menjalin komunikasi dengan pemilik blog/website. Seperti yang telah saya singgung dalam artikel saya sebelumnya mengenai hal-hal penting yang harus diperhatikan semoga blog diterima Adsense, pada poin ke 5 saya sangat menyarankan untuk menyediakan halaman kontak atau contac us pada sajian 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 dapat 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 dapat menciptakan contact form melalui widget yang disediakan Blogspot atau memakai jasa layanan pihak ketiga menyerupai situs 123contactform.

Cara Memasang Contact Us di Blog Dengan Mudah

Tetapi kali ini saya akan memperlihatkan panduan cara menciptakan halaman contact us yang lebih simpel. Anda tinggal memasukkan isyarat 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, contohnya "Contact Us", semoga nanti URL dapat bisa sesuai dengan yang Anda inginkan, ialah https://www.namabloganda/com/p/contact-us.html

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

5. Kemudian copy isyarat 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 goresan pena yang diblok Kuning

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

Ganti  //panduaneka.com/ dengan domain blog Anda

6. Kemudian klik Publish.

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

Share this post