Sunday, 3 July 2016

Cara Membuat Contact Form di Halaman Statis Blog


Cara Membuat Contact Form di Halaman Statis Blog

Pada hari ini Blog Billy art akan membahas tentang cara membuat Contact Form di halaman statis Blog "kenapa di halaman statis?" karena kalo menurut Billy Art lebih serasa private antar pengunjung dan admin dan yang paling penting nyaman bagi pengunjung. Kalo kalian mau liat contoh Contact Form yang akan kita buat seperti apa cek tombol demo dibawah
Sekilas tentang Contact Form ...

Contact Form ini memiliki nama yang banyak 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).

"Gunanya Contact Form apa sih emang penting?" tentunya sangat penting, karena jika pengunjung kita ingin berkomunikasi secara privasi pengunjung bisa mengirim pesan melalui Contact Form ini kepada penulis. Bisa berkomunikasi tentang hal-hal yang ingin diketahui oleh pengunjung atau semacamnya. 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, menggunakan Contact Form ini juga memiliki kekurangan loh. Salah satunya yaitu spam (mengirim pesan terus terusan yang  tak penting, tidak jelas isinya). Tapi itu hanya segelintir orang aja yang kurang kerjaan.

Cara membuat layanan Contact Form ada banyak macamnya. Bisa dibuat sendiri jika kamu menguasai script HTML, atau juga menggunakan layanan gratis di internet yang tersedia pada website (Contohnya website FoxyForm atau ContactForm123).

Baca Juga : Cara Menambah, Mengganti dan Menghapus Admin Pada Blog

Karena kita akan membuatnya Contact Form ini pada Halaman Statis Blog, Jadi kita tidak akan menggunakan penyedia layanan website lain untuk membuat Contact Form ini (yang kadang ada iklan dan link pada widgetnya) dan gak perlu repot repot daftar di website tersebut. Jadi kita pakai cara paling mudahnya aja ya? Yuk kita mulai saja cara membuat contact form.

Cara Membuat Contact Form di Halaman Statis Blog

1. Pertama kita akan buat tempat untuk formulir kontaknya terlebih dahulu langsung silahkan menuju ke Blogger  Laman  Laman Baru.

2. Masuk pada mode HTML pada Laman yang kamu buat.

Mode HTML Pada Laman Blog

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>

Kalian bisa ganti kode yang aku tandai diatas dan untuk kode warnanya kalian bisa cari kodenya disini ganti sesuai warna yang kalian inginkan silahkan berkreasi!

3. Jika sudah selesai berkreasi silahkan Publikasikan, Silahkan kalian tes Contact Formnya berfungsi atau tidak? pasti belum berfungsi kan?

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.

Widget Formulir Kontak

5. Nah sekarang silahkan coba kalian tes Contact Formnya tulis aja seperti ini..

Widget Formulir Kontak

6. Pasti di Gmail kalian akan muncul..

Blogger Contact Form

dan isi pesannya adalah ...

New message received (Testing)

7. Nah sekarang Contact Form kalian sudah terbukti berfungsi!

Sekian tutorial tentang 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 Billy Art.

bangbil.com adalah sebuah personal blog. Seorang blogger yang masih merangkap sebagai pelajar. Temui aku di Sosial Media :

Berlangganan via Email

Berlangganan artikel terbaru dari blog ini langsung via email.