Cara membuat Contact Form sederhana di Blog

Haisob apa kabar?, Pada kesempatan ini haisob.com akan membagikan tutorial cara membuat Contact Form atau cara membuat Contact US di Blog. Mengapa saya katakan sederhana? karena untuk memasangnya kita tidak perlu mendaftar ke website pihak ketiga (yang kadang kala widgetnya ada iklannya dan link yang keluar) ke web penyedia widget seperti ini, tapi kita akan menggunakan widget yang telah disediakan oleh pihak Blogger.

Contact form sangatlah penting untuk blog maupun para pembaca karena jika mereka ingin menyampaikan sesuatu kepada pemiliki blog, mereka dapat menghubungi kita menggunakan widget ini. Meskipun sudah ada banyak media lain, namun halaman kontak menjadi pilihan karena menjaga privacy bagi kedua belah pihak, yaitu pemilik blog/website dan visitor/customer.

Contact Form Sederhana


Contact Form Sederhana
Contact Form Sederhana di Blog


Biasanya contact form diberi judul "Hubungi Kami" atau "Contact Us" dan disediakan oleh Blogger hanya bisa digunakan untuk widget blog, tapi dengan tutorial ini maka kita dapat memasangnya ke halaman blog kita.




Cara Memasang Widget Contact Form di Blog

Kita harus menambahkan widget contact form kedalam halaman yang kita buat. Caranya, buka Layout ➔ Add gadget ➔ Contact Form. Letakkan di sembarang tempat.

Cara Membuat Contact Form Sederhana di Blogger
Add Contact Form


Kemudian cari kode seperti dibawah ini dan hapus pada beberapa bagian dan sisakan seperti dibawah ini ( tulisan "hapus bagian ini" itu dihapus juga yah )
  <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
Hapus bagian ini
</b:includable>
  </b:widget>
</b:section>

Nah sekarang save template kamu.

Memang kita harus memasang dulu widgetnya kemudian menghapusnya seperti cara di atas, kalau tidak contact formnya tidak akan berfungsi. Jika sudah, sekarang tinggal memasukan kode dibawah ini ke halaman blog kamu.

Cara Membuat Halaman Contact Us


Sekarang lanjutkan untuk membuat halaman "Contact us". Buat laman baru atau bisa juga membuat postingan baru, terserah kamu mau pilih yang mana. Jika sudah siap, letakan kode dibawah ini dengan mode HTML (sebelahnya compose) ke dalam halaman yang baru kamu buat tadi.
<div class='haisob-contact-form'>
<div class='form'>
<!-- Custom Contact Form By haisob start -->
<div class='haisob-contact-title'>
Contact Form
</div>
<form name='contact-form'>
<!-- Name Field -->
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
<p></p>
<!-- Email ID Field -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
<p></p>
<!-- Message Field -->
<textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Leave Your Message..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
<p></p>
<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit haisob-button-color' type='reset' value='Clear'/>
<!-- Send Button -->
<input class='contact-form-button contact-form-button-submit haisob-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>
<!-- Validation -->
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
<!-- End Custom Contact Form By haisob -->
</div></div>
<style>
.haisob-contact-form { background:#fff; box-shadow:-1px 2px 3px #ddd; font:12px arial; width:100%; max-width:320px; margin:20px auto; padding:15px; border:1px solid #ccc; }
.haisob-contact-title { box-shadow:-1px 2px 3px #ddd; text-shadow:0 1px 1px rgba(0,0,0,.3); margin:0 0 10px 0; font-weight:400; padding:10px 15px; font:16px Arial; cursor:pointer; text-align:center; color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.contact-form-name,.contact-form-email,.contact-form-email-message { max-width:320px; width:100%; font-weight:bold; }
.contact-form-name { background:#f3f3f3 url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 8px; background:#f3f3f3; border:1px solid #ccc; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; box-shadow:inset -2px 2px 3px #ddd; vertical-align:top; }
.contact-form-email { background:#F2F2F2 url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 10px; background-color:#F2F2F2; border:1px solid #ccc; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; vertical-align:top; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-email:hover,.contact-form-name:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:5px 15px 5px 28px; }
.contact-form-email-message:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:10px; }
.contact-form-email-message { background:#FFF; background-color:#f2f2f2; border:1px solid #ccc; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:arial; font-size:13px; margin:0; margin-top:5px; padding:10px; vertical-align:top; max-width:320px !important; height:150px; border-radius:4px; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-button { cursor:pointer; height:32px; line-height:28px; font-weight:bold; border:none; }
.contact-form-button { display:inline-block; zoom:1; *display:inline; vertical-align:baseline; margin:0 2px; outline:none; cursor:pointer; text-align:center; text-decoration:none; font:14px/100% Arial,Helvetica,sans-serif; padding:.5em 2em .55em; text-shadow:0 1px 1px rgba(0,0,0,.3); box-shadow:-1px 2px 3px #ddd; }
.contact-form-button:hover { text-decoration:none; }
.contact-form-button:active { position:relative; top:1px; }
.haisob-button-color { color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.haisob-button-color:hover { background:#f47c20; }
.haisob-button-color:active { color:#fcd3a5; }
.contact-form-name { background:#F3F3F3 url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>

Masih dalam mode HTML langsung saja pubilkasikan, jika kamu kembali ke mode Compose kemudian di publikasikan contact formnya bisa berantakan.

Memang widget diatas tampilannya simple dan sederhana, tapi cukuplah menurut saya. Kamu dapat mengujicobanya dengan mengirimakan pesan menggunakan contact form ini dan periksa apakah pesannya muncul di email gmail (email Blogger) kamu.
Join This Site