Cara Membuat Contact Form di Halaman Statis Blog, Jika kalian bertanya kenapa meletakkan contact form pada laman statis blog? karena selain untuk kenyamanan pengunjung, efek lainnya adalah untuk meringankan beban dari blog karena contact form disini tidak dijadikan sebagai widget, melainkan diletakkan di dalam halaman statis blog. Hal ini membuat contact form kalian terhindar dari spamner.
Ini adalah contoh demo dari Contact Form pada Halaman Statis Blog
Contact Form ini memiliki banyak nama di kalangan Blogger, ada yang menyebutnya sebagai kontak saran, kontak kami dan formulir kontak. Tapi lebih seringnya sih Contact Form (formulir kontak) dan Contact Us (kontak kami).
"Apa Kegunaan dari Contact Form, Memang Penting?" tentu memasang contact form ini sangat penting, ketika pengunjung ingin menyampaikan sesuatu maka mereka bisa menggunakan contact form untuk mengirimkan pesan melalui Contact Form kepada penulis. Bisa juga untuk berkomunikasi tentang hal yang ingin diketahui oleh pengunjung blog. Meskipun ada Facebook atau Social Media yang lainnya tentunya Contact Form tetap yang utama di kalangan para Blogger karena penggunaanya yang simple dan mudah.
Keuntungan menggunakan Contact Form di blog kalian adalah..
- Pengunjung dapat menyampaikan pertanyaan dengan topik dari salah satu artikel di blog kamu dan jika kamu dapat menjawab pertanyaan tersebut maka pengunjung akan merasa senang karena pertanyaannya dijawab dan mungkin pengunjung tersebut akan sering mengunjungi blog kamu.
- Pengunjung juga dapat memberi kritik dan saran dimana secara tidak lansung akan membuat kamu mengembangkan blog agar dapat lebih baik lagi demi kenyamanan pengunjung.
Walaupun terdapat keuntungan dalam menggunakan Contact Form. Contact Form juga memiliki kekurangan, salah satunya adalah mudah untuk di spam (mengirim pesan secara terus menerus yang isinya tidak penting dan tidak jelas). Oleh karena itu bangbil sarankan kalian untuk menyiapkan email yang siap untuk menerima spam.
Cara untuk membuat layanan Contact Form ada banyak macamnya. Kalian bisa membuatnya sendiri jika kalian menguasai script HTML, atau juga menggunakan layanan gratis di internet yang tersedia pada website (Contoh websitenya : FoxyForm atau ContactForm123).
Karena kita akan membuat sendiri Contact Form ini pada Halaman Statis Blog, Maka kita tidak akan menggunakan penyedia layanan website lain untuk membuat Contact Form ini. Yuk kita mulai saja cara membuat contact form.
Cara Membuat Contact Form di Halaman Statis Blog
1. Pertama kita akan membuat tempat untuk formulir kontaknya terlebih dahulu langsung silahkan menuju ke Blogger ► Laman ► Laman Baru.
2. Masuk pada mode HTML pada Laman yang kamu buat.
Lalu silahkan isikan dengan kode HTML dibawah
<form id="contact-form" 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" />
<div style="max-width: 222px; 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}
#contact-form{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:#34495e;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover{background:#3498db;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0}
.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}
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>Ganti kode yang ditandai diatas untuk mengganti warna tampilan dari contact form yang diinginkan. Silahkan gunakan alat kode warna ini.
4. Sekarang kita akan membuat Contact Formnya berfungsi, Pergi ke Tata Letak ► Tambahkan Gadget ► Gadget lainnya ► Formulir kontak ► Simpan. Tenang aja widget Formulir Kontak yang kalian buat ini gak akan membekas di Beranda website kamu.
Sekarang, untuk mengetes apakah Contact Formnya berfungsi atau tidak. Pergi ke laman contact form kalian lalu tulis isi pesan lalu klik Send Message.
6. Maka, kalian akan menerima kotak masuk pada gmail kalian. Jika sudah seperti ini artinya Contact Form kalian sudah berfungsi sepenuhnya.
dan isi pesannya adalah ...
Itu dia cara membuat Contact Form di Halaman Statis Blog semoga tutorial ini memudahkan kalian untuk berkomunikasi dengan pengunjung kalian. Jika ada yang mau bertanya atau apa yang tidak di pahami silahkan komentar di kolom bawah, jika ada kritik dan saran silahkan kirim melalui Formulir Kontak