Cara Membuat Show Hide Contact Form di Sudut Blog

Prodeku - Contact Form (Kontak Formulir) merupakan widget yang sangat penting dalam sebuah blog. Dengan adanya contact form, pengunjung dapat lebih mudah untuk bertanya, request artikel, menawarkan kerjasama, serta memberikan kritik dan saran pada blog yang kita kelola.

Namun beda halnya dengan contact form biasa yang ada di halaman tersendiri. Contact form yang akan saya bagikan ini akan selalu ada di setiap halaman yang nantinya beredampingan dengan tombol back to top milik anda. uniknya, contact form ini dapat di show hide agar tidak memenuhi layar blog anda. Penasaran? Yuk ikuti tutorial mudah dibawah ini.

Tutorial Show Hide Contact Form

Buka akun blogger
Pilih menu Tata Letak
Tambahkan widget contact form (dimana saja) pada Tata Letak
Lanjut, pilih menu Template > Edit HTML

Cari kode ]]></b:skin>, tambahkan kode berikut ini tepat diatas kode ]]></b:skin>

/* Fixed Contact Form */
.ContactForm,.ContactForm .title{
 display:none;
}
.floating-ai{
 position:fixed;
 width:280px;
 right:30px;
 bottom:0;
 z-index:99;
}
.floating-ai-head a{
 cursor:pointer;
 padding:8px 10px;
 background:#5FD0BA;
 color:#fff;
 font-weight:400;
 display:inline-block;
 transition:all .3s linear;
}
.floating-ai-head a:hover{
 background:#53B6A2;
 color:#fff;
 text-decoration:none;
}
.floating-ai-body{
 height:285px;
 background:#fff;
 padding:10px;
 display:none;
 box-shadow:0 2px 5px 0 rgba(0,0,0,.26);
}
.floating-ai-head{
 text-align:right;
}
.floating-ai-body .ContactForm{
 margin:0;
 display:block!important;
}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{
 background:#fff;
 border:0;
 padding:10px 0;
 color:#999;
 font-weight:normal;
 width:100%;
 max-width:initial;
 border-bottom:1px solid #ccc;
 transition:.2s ease all;
}
#ContactForm1_contact-form-email-message{
 background:#fff;
 border:none;
 color:#8f8f8f;
 padding:10px 0;
 width:100%;
 max-width:initial;
 border-bottom:1px solid #ccc;
}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-name:hover,#ContactForm1_contact-form-email:hover,#ContactForm1_contact-form-email-message:hover{
 background:#fff;
 box-shadow:none;
 border-bottom-color:#ff3c3c;
 transition:all .3s linear;
}
#ContactForm1_contact-form-submit{
 position:relative;
 color:#fff;
 font-weight:400;
 font-size:12px;
 cursor:pointer;
 background:#57ad68;
 border:none;
 float:left;
 box-shadow:0 0 0 0 rgba(0,0,0,0.19);
 transition:all .3s linear;
}
#ContactForm1_contact-form-submit:hover{
 background:#468a53;
}
#ContactForm1_contact-form-submit:active{
 box-shadow:0 4px 15px 0 rgba(0,0,0,0.19);
}
.contact-form-widget form{
 display:table;
 margin:0 auto;
}
.contact-form-widget {
 max-width:initial;
}
.floating-ai-body{
 -moz-box-sizing:initial;
 -webkit-box-sizing:initial;
 box-sizing:initial;
}

Cari kode </body>, letakkan kode berikut ini tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Fixed Contact Form
$("body").append('<div class="floating-ai"><div class="floating-ai-head"><a>Contact us</a></div><div class="floating-ai-body"></div></div>'),$(".ContactForm").appendTo(".floating-ai-body");var slide_up_ai=!1;$(".floating-ai-head a").click(function(){slide_up_ai?(slide_up_ai=!1,$(".floating-ai-body").slideUp()):(slide_up_ai=!0,$(".floating-ai-body").slideDown())});
//]]>
</script>

Simpan Template.

Jika sudah berhasil, silahkan cek contact form anda, apakah sudah berjalan dengan lancar? Untuk mengeceknya, silahkan isi contact form kemudian kirim. Jika berhasil, maka akan ada email masuk pada gmail anda seperti ini.