Contact Form atau formulir kontak adalah sebuah navigasi yang digunakan oleh para blogger untuk memberikan kemudahan kepada pengunjungnya dalam berinteraksi lebih dalam dengan pemilik blog. Berbeda dengan Kolom komentar yang ada pada bagian bawah halaman posting, contact form akan membuat pengunjung dapat berkomunikasi langsung dengan admin blog via email sedangkan kolom komentar biasanya akan ditayangkan langsung pada bagian bawah halaman posting.
Artinya contact form ini lebih privasi dibandingkan dengan kolom komentar yang bisa dibaca oleh pengunjung lainnya, Sekarang ini saya sudah memunculkan fasilitas baru yaitu kontak forum untuk memudahkan para pengunjung untuk menanyakan persoalan tentang websitenya. Namun demikian navigasi ini boleh terbilang sederhana jika dibandingkan dengan kontak forum yang dirancang para blogger atau penyedia kontak forum instan lainnya, Contoh kontak forumnya seperti yang sedang saya pakai saat ini.
Tetapi jangan salah dulu, walaupun sederhana tetapi kualitasnya cukup mewah dan keren. Yang jelas contact form bawaan om bloger pasti lebih aman dari url susupan. Masalah kedua (mungkin bagi sebagian orang dianggap masalah sob) contact form yang di sediakan google hanya diuntukkan pada bagian body atau footer saja (karena pemasangannya lewat gadget.
Tapi kamu tidak usah khawatir, karena masih bisa kita fikirkan agar kontak forum ini bisa kita buat dalam sebuah halaman menu dan tidak tampil lagi di bagian gadget (sidebar, footer). Tampilanya pun masih bisa kita ubah dengan menambahkan beberapa kode yang tidak terlalu panjang.
Bagi kamu pendatang baru atau yang lama tapi belum bisa membuat kotak forum, kamu bisa lanjutkan membaca artikel sederhana ini. Bagi yang senior bisa memberi masukannya, demi kebaikan kita bersama. Untuk dapat membuatnya silahkan kamu ikuti langkah-langkah berikut ini.
Cara Membuat Halaman Contact Form di Blogspot
1. Buatlah sebuah halaman baru dengan judul Contact, Kontak Saya, Hubungi Saya, atau Contact US, apapun yang anda lebih sukai. Saya sarankan jenis halaman tersebut adalah halaman Static Page dan bukan halaman posting seperti biasanya, karena halaman tersebut bersifat timeless atau tidak mengandung url yang menunjukkan bulan dan tahun. Selain itu, halaman Contact Me juga tidak membutuhkan optimasi search engine (SEO) seperti postingan lainya.2.Klik HTML di ujung kanan tepat dikanan Compose
3. Masukkan kode di bawah ini di bagian HTML
Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.
<br />
<form id="kontak-arlina" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<br />
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
form.payforpal{margin:auto;text-align:center}
#kontak-arlina{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}
#ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}
.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<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'] = '5831797774698540610';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5831797774698540610','//www.writergilby.com/','5831797774698540610');
_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': '5831797774698540610', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>Ganti semua kode 5831797774698540610 di atas dengan kode ID blog Anda.
Ganti kode //www.writergilby.com/ di atas dengan url blog Anda
4. Untuk preview hasilnya, cukup klik Compose (kembali ke menu) lalu Publikasikan, Setelah itu Klik Lihat.
5. Jika sudah selesai, anda bisa langsung disimpan atau bisa ditambahkan beberapa tulisan lain semaumu, Jangan lupa untuk mencoba atau tes kontak forum tersebut agar hasilnya maksimal.
Sekian tutorial dari saya, jika ada hal yang masih bingung dan perlu di tanyakan silahkan tanyakan di kolom komentar, Secepatnya saya akan membantu persoalan tersebut, Terimakasih.
