Membuat Widget Contact Form Melayang

MERDEKA FILES, Jakarta - Contact Form adalah salah satu fasilitas email dari blog yang berfungsi menghubungkan antara pengunjung dan pemilik blog untuk saling berkomunikasi secara personal. Cara pengiriman pesannya pun cukup mudah, kita hanya perlu menulis nama, alamat email, dan isi pesan. Jadi tidak perlu repot-repot login ke akun email, namun contact form sudah tersedia di blog kita sendiri.

Nah, ini dia cara pemasangan widget tersebut yang merupakan gabungan dari kode Contact Form yang di pasang di static page.

1. Buka blog > Edit HTML > Kemudian pasang kode CSS di bawah ini tepat di atas ]]></b:skin>

/* CSS Contact Form */

.ContactForm, .ContactForm .title {

 display:none;

}

.floating-ai {

 position:fixed;

 width:250px;

 left:0;

 bottom:0;

 z-index:999;

}

.floating-ai-head a {

 padding:5px 10px;

 background:#2997e0;

 color:#fff;

 font-weight:400;

 display:inline-block;

 font-family:Oswald,sans-serif;

 text-transform:uppercase;

 *display:block;

 zoom:1;

 transition:all 0.3s linear;

}

.floating-ai-head a:hover {

 background:#2588ca;

 color:#fff;

}

.floating-ai-body {

 height:285px;

 background:#fff;

 padding:10px;

 display:none;

 box-shadow:0 0 5px 0 rgba(0,0,0,0.2);

}

.floating-ai-head {

 text-align:left;

}

.floating-ai-body .ContactForm {

 margin:0;

 display:block!important;

}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {

 background:#eee;

 margin-bottom:10px;

 border:none;

 color:#8f8f8f;

 padding:2px;

 width:75%;

}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {

 background:#f5f5f5;

 transition:all 0.3s linear;

}

#ContactForm1_contact-form-email-message {

 background:#eee;

 margin-bottom:10px;

 border:none;

 color:#8f8f8f;

 font-family:Oswald,sans-serif;

 padding:5px;

 width:95%;

}

#ContactForm1_contact-form-submit {

 width:100px;

 color:#fff;

 font-family:Oswald,sans-serif;

 text-transform:uppercase;

 font-weight:400;

 font-size:14px;

 cursor:pointer;

 background:#57ad68;

 border:none;

 float:left;

 transition:background 0.3s linear;

}

#ContactForm1_contact-form-submit:hover {

 background:#468a53;

}

Catatan : Untuk font dan warna disesuaikan dengan blog Sobat.

2. Pasang Script di bawah ini tepat di atas </body> dan simpan template.

<script type='text/javascript'>

//<![CDATA[

$('body').append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">Contact</a></div><div class="floating-ai-body"></div></div>');

$('.ContactForm').appendTo('.floating-ai-body');

var slide_up_ai = false;

$('.floating-ai-head a').click(function(){

 if (!slide_up_ai) {

 slide_up_ai = true;

 $('.floating-ai-body').slideDown();

 } else {

 slide_up_ai = false;

 $('.floating-ai-body').slideUp();
}
});

//]]>

</script>

3. Kemudian pasang widget contact form di Tata Letak > Tambahkan Gadget > Pilih Gadget Lainnya > dan tambahkan widget Formulir Kontak

4. Terakhir, simpan widget dan segera lihat hasilnya. Semoga bermanfaat...

Sumber

Related Posts:

Tweet