Simple and Clean Contact Form Widget for Blogspot

HaiSob apa kabar? pada kesempatan ini saya akan berbagi cara membuat Clean and Simple Contact Form untuk Blogspot Blogger. Memasang ini di blog merupakan salah satu bagian yang penting dan berfungsi sebagai media korenspondensi formal dan personal.

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. Widget Clean and Simple Contact Form ini dibuat langsung dari widget default bawaan Blogspot jadi kamu tidak perlu mendaftar di web-web penyedia widget contact form ini. (Baca juga: cara membuat contact form sederhana di blog)

Custom Blogger Contact Form Widget


Simple and Clean Contact Form Widget for Blogspot
Simple and Clean Contact Form Widget for Blogspot


Cara Memasang Widget Contact Form di Blogger


Kita harus menambahkan widget contact form di blog kita. Caranya, buka Layout ➔ Add gadget ➔ Contact Form. Letakkan di sembarang tempat, contoh disini saya meletakannya di sidebar blog.

Cara Memasang Widget Contact Form di Blogger
Add Contact Form

Selanjutnya kita harus menyembunyikan widget bawaan blogger ini. caranya: Pilih menu Template ➔ Edit HTML
Simple and Clean Contact Form Widget for Blogspot
Template - Edit HTML

Letakan kode dibawah ini di atas kode ]]></b:skin> atau di atas </style>
#ContactForm1{display: none !important;}
Selnjutnya kita akan membuat halamnnya:

Cara Membuat halaman Simple and Clean Contact form di Blogger


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.
<style type="text/css">
.haisob-contact-form{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 20px;padding:10px 15px;font-size:12px;letter-spacing:1px;color:#444;background:#F3F3F3;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:37px}.contact-form-email-message{height:170px}.contact-form-button-submit,.contact-form-button-submit:hover{width:13%;height:30px;font:normal 12px Arial;letter-spacing:1px;color:#444;display:block;outline:none;margin-bottom:20px;text-align:center;background:#E6E6E6;border:0;cursor:pointer}.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}
</style>
<div class="widget ContactForm" id="ContactForm22"><div class="haisob-contact-form"><div class="form"><form name="contact-form"><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="NAME" onblur='if (this.value == "") {this.value = "NAME";}' onfocus='if (this.value == "NAME") {this.value = "";}'  /></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="EMAIL" onblur='if (this.value == "") {this.value = "EMAIL";}' onfocus='if (this.value == "EMAIL") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" value="MESSAGE" onblur='if (this.value == "") {this.value = "MESSAGE";}' onfocus='if (this.value == "MESSAGE") {this.value = "";}'></textarea></div><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></form></div></div></div>
<a href="http://www.haisob.com/2017/06/simple-and-clean-contact-form-widget-for-blogspot.html">Simple and Clean Contact Form Widget for Blogspot</a><br />

Masih dalam mode HTML langsung saja pubilkasikan.

Sekian Simple and Clean Contact Form Widget for Blogspot. Semoga bermanfaat.