Custom Widget Contact Form Pada Blog

Custom Widget Contact Form Pada Blog – semua pasti sudah tahu fitur widget terbaru dari blogger agar bisa berkontak langsung via email dengan pemilik atau author blog, inilah kemudahan yang diberikan oleh blogger agar penggunanya bisa lebih mudah untuk berkomunikasi didalam sebuah blog dengan menggunakan widget contact form. Walaupun widget contact form memang jarang di tampilkan pada sidebar atau jarang dilihat oleh pengunjung namun tidak salah apabila kita melengkapi blog dengan widget contact form dengan custom yang menarik untuk kemudian bisa dipasang kedalam halaman statis blog atau tempat yang dikehendaki. Memang benar apabila setelah menambahkan contact form dari widget yang disediakan oleh blogger sudah bisa langsung digunakan. Namun tidak ada salahnya juga apabila kita ingin melihat tampilan widget contact form agar bisa menjadi lebih menarik atau sesuai dengan tampilan yang di kehendaki sendiri. Langkah-langkah untuk memasang dan memodifikasi juga cukup mudah, berikut adalah tutorial cara Custom Widget Contact Form Pada Blog.

1. Login ke akun blogger.
2. Kemudian klik Tata Letak > Tambah widget > Gadget Lainnya > Formulir Kontak, lalu klik Simpan.
3. Selanjutnya adalah menyembunyikan widget contact form bawaan blogger tersebut, caranya klik Template > Edit HTML lalu cari kode ]]></b:skin> gunakan CTRL+F.
4. Copy kode berikut ini lalu paste tepat diatas kode ]]></b:skin> kemudian klik Simpan Template.

#ContactForm1 {display:none}

5. Lalu berikutnya kita akan memasang tampilan baru widget contact form, caranya Copy kode berikut ini lalu klik Laman > Laman Baru > Laman Kosong kemudian paste kode tersebut pada area HTML halaman statis.

<style>
#contact-wrapper{ width:400px; height:auto; padding: 10px; margin: auto; position:relative; font:12px Arial; }  #mycontactform{ width:400px; padding: 10px; margin: auto; position:relative; } .field{ background:gray; padding:10px; height:50px; width:400px; } .area{ padding:10px; min-height:195px; } #ContactForm1_contact-form-name{ width: 400px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zWyTO_-5sv7nKsNtLdOUKorPyxRyIh3ZDBXrbOvWgLVbY4zGMZsdw0eVuouWm-l1J7JSuxAgGCsfiJksVxb8wDtk6mPUPv022WnfApxrPyNCxO_AWzVpIUL6Hy10MfJhyphenhyphenV5uPBlCTok/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 400px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjnUZ8sgV-r5clC6-bVR4SqAWuSH2aP_k26RZFDV5rFGAFl-PmwDSbx40OiTP1DUUcIq3p00IAE75eRz9JKzQPHwZKE0Yazlp8iJEz462vcT0r6yZKBGUjiBYxi5N9Ng-2Ae8J6hlHLuo/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 400px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlwIJJDVlevcYJJr3cs-ObXg_Stnk8d5wzUnk1CoYUfocgfEr_2mssSa9ZDz0mLLloAZej3sKUJmBB75NWFmb7EWpcSbL9ZxUa5KIRcZ2byfK6I55OPXPL3JJ_K8G2NXnRhZUy4x3SkDk/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: right; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid darkgreen; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 400px; margin-top:30px; }
</style>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/highlight.js"></script>

<div id="contact-wrapper">
<form id="mycontactform">
<div>
<div class="field">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
</div>
<div class="field">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
</div>
<div class="field area">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div></div></div></div></form></div>

6. Langkah terakhir klik Publish.

Sampai sini selesai sudah langkah-langkah untuk Custom Widget Contact Form Pada Blog, dan kini widget contact form sudah terpasang dalam halaman statis blog. Apabila ingin memasang widget contact form tersebut kedalam sidebar maka caranya setelah sampai pada point 5 copy kode tersebut kemudian paste kedalam widget HTML/Javascript. Untuk tinggi, lebar maupun warna background contact form silahkan custom agar lebih sesuai dengan yang di kehendaki.