Membuat Contact form with CSS rainbow devider di Blog

HaiSob apa kabar? Berikut ini saya akan membahas tentang cara membuat Contact form with CSS rainbow devider 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 Contact form with CSS rainbow devider ini dibuat langsung dari widget default bawaan Blogspot jadi kamu tidak perlu mendaftar di web-web penyedia widget contact form ini. (Baca juga: Simple and Clean Contact Form Widget for Blogspot)

Custom Blogger Contact Form Widget


Contact form with CSS rainbow devider for Blogspot
Contact form with CSS rainbow devider for Widget 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
Contact form with CSS rainbow devider Widget for Blogspot
Template - Edit HTML

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

Cara Membuat halaman Contact form with CSS rainbow devider 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:0}hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}hr:before{content:"";display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#C4DD83;box-shadow:5em 0 0 0 #F4FCC9,10em 0 0 0 #FDCD78,15em 0 0 0 #ED786F,20em 0 0 0 #D99DBF,25em 0 0 0 #C39EDC,30em 0 0 0 #679DE2,35em 0 0 0 #62C2E3,40em 0 0 0 #F4FCC9,45em 0 0 0 #FDCD78,50em 0 0 0 #ED786F,55em 0 0 0 #D99DBF,60em 0 0 0 #C39EDC}.contactf-name,.contactf-email{float:left;width:49.25%}.contactf-name{margin-right:1.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:25px 0 0;padding:10px;font-size:15px;color:#ccc;border-color:#E8E8E8;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#EE786F;border:0;border-bottom:2px solid #D4685C;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #D4685C;box-shadow:inset 0 -2px #D4685C}.contact-form-button-submit:active{top:1px;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"><hr><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="E-mail address" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {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="Type your message here..." rows="5" type="text" value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send Message" /><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></div></form></div></div></div>
<a href="http://www.haisob.com/2017/08/membuat-contact-form-with-css-rainbow-devider-di-blog.html">Contact form with CSS rainbow devider</a>
Masih dalam mode HTML langsung saja pubilkasikan.

Sekian Contact form with CSS rainbow devider Widget for Blogspot. Salam Bloggers.