Cara membuat Contact form with CSS Ribbon di Blog

HaiSob apa kabar? Pada ini saya akan membagikan cara membuat Contact form with CSS Ribbon 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 Ribbon 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 floating contact form di Blogger)

Custom Blogger Contact Form Widget


Contact form with CSS Ribbon for Blogspot
Contact form with CSS Ribbon 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 Ribbon 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 Ribbon 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">
.widget.ContactForm{z-index:1}.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px 0;background:#EBEBE3;-webkit-border-radius:2%;-moz-border-radius:2%;border-radius:2%}.contact-form-widget .form{width:91%;margin:0 auto}.haisob{font:16px Arial;text-transform:capitalize;text-shadow:0 1px 2px rgba(0,0,0,0.25);position:relative;background:#6B5F53;color:#fff;text-align:center;padding:1em 2em;margin:0 -16px}.haisob:before,.haisob:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #584C40;z-index:-1}.haisob:before{left:-1.7em;border-right-width:1.2em;border-left-color:transparent}.haisob:after{right:-1.7em;border-left-width:1.2em;border-right-color:transparent}.haisob .haisob-content:before,.haisob .haisob-content:after{content:"";position:absolute;display:block;border-style:solid;border-color:#42362A transparent transparent;bottom:-1em}.haisob .haisob-content:before{left:0;border-width:1em 0 0 1em}.haisob .haisob-content:after{right:0;border-width:1em 1em 0 0}.contactf-name,.contactf-email,.contactf-message{text-align:left;margin-top:25px;color:#a1937b;font-size:13px}.contactf-name,.contactf-email{float:left;width:100%}.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:10px 0 0;padding:10px;font-size:12px;color:#aaa;border-color:#DBD6D1;border-width:1px;box-shadow:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.contact-form-name,.contact-form-email{height:35px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:37px;font:normal 12px Arial;outline:none;letter-spacing:1px;color:#fff;text-align:center;cursor:pointer;text-shadow:1px 1px 0 #ffe8b2;color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#fed970) to(#febd4b));background:-webkit-linear-gradient(#fed970,#febd4b);background:-moz-linear-gradient(#fed970,#febd4b);background:-ms-linear-gradient(#fed970,#febd4b);background:-o-linear-gradient(#fed970,#febd4b);background:linear-gradient(#fed970,#febd4b);-pie-background:linear-gradient(#fed970,#febd4b)}.contact-form-button-submit:active{color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#febd4b) to(#fed970));background:-webkit-linear-gradient(#febd4b,#fed970);background:-moz-linear-gradient(#febd4b,#fed970);background:-ms-linear-gradient(#febd4b,#fed970);background:-o-linear-gradient(#febd4b,#fed970);background:linear-gradient(#febd4b,#fed970);-pie-background:linear-gradient(#febd4b,#fed970)}.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="contact-form-widget"><h2 class="haisob"><strong class="haisob-content">Shoot Me an Email</strong></h2><div class="form"><form name="contact-form"><div class="contactf-name">Your 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">E-mail address *:<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">Message *:<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." rows="5" value="" placeholder="Type your message here..." 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-ribbon-di-blog.html">Contact form with CSS Ribbon</a>
Masih dalam mode HTML langsung saja pubilkasikan.

Sekian Contact form with CSS Ribbon Widget for Blogspot. Salam Bloggers.