Cara Membuat Contact Form keren

Oky shobat berikut ini adalah Cara Membuat Contact Form Keren di blogger
Membuat contact form ini cukup mudah namun di butuhkan ke telitian dalam membuatnya, di karenakan contac form yang akan kita buat ini harus dalam dukunga widget/gadget contact form blog..
Kata dari contact form adalah: Contact yang berarti kontak sedangkan form adalah formulir!!!, jadi contact form adalah formulir kontak, yang biasanya di pakai
oleh pengunjung blog/website dalam melakukan plaporan atau pesan yang ingin di sampaikan langsung ke admin blog/website.
sebelumnya saya share template khusus demo widget, meski template ini masih dalam golongan premium untuk pencapaian free di butuhkan 1k like fb untuk template ini...

Cara Membuat Contact Form keren

LIVE DEMO

Memasang Contact Form keren di Blog/Blogger

Pertama masuk ke Dasboard blog anda ==> Pilih menu Tata Letak, ==> Pada menu Tata Letak klik tambahkan Gadget/Widget ==> Contact Form Widget

Cara Membuat Contact Form keren

kemudian klik simpan widget,.. jika sudah masuk ke menu Template pilih Edit HTML cari code seperti berikut:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
Hapus bagian ini
</b:includable>
</b:widget>
</b:section>

Kemudian klik simpan Template
Sekarang mari kita ke langkah selanjutnya!!!

Membuat Halaman Contact Us/Form

Untuk membuat contact form ini anda harus membuat halaman stastic, karena lewat halaman ini kita akan menyimpan Code HTML contact form,..
buatlah terlebih dahulu halaman baru anda,,, dari mode Compose pindah ke mode HTML lalu masukan code berikut ini:

<div class='bulshitman-contact-form'>
<div class='form'>

<div class='bulshitman-contact-title'>
Contact Form
</div>
<form name='contact-form'>

<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' />
<p></p>

<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == "") {this.value = "Email ID";}' onfocus='if (this.value == "Email ID") {this.value = "";}'/>
<p></p>

<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Leave Your Message..' onblur='if (this.value == "") {this.value = "Leave Your Message..";}' onfocus='if (this.value == "Leave Your Message..") {this.value = "";}'></textarea>
<p></p>

<input class='contact-form-button contact-form-button-submit bulshitman-button-color' type='reset' value='Clear'/>

<input class='contact-form-button contact-form-button-submit buslhitman-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>

<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

</div></div>
<style>
.bulshitman-contact-form { background:#fff; box-shadow:-1px 2px 3px #ddd; font:12px arial; width:100%; max-width:320px; margin:20px auto; padding:15px; border:1px solid #ddd; }
.buslhitman-contact-title { box-shadow:-1px 2px 3px #ddd; text-shadow:0 1px 1px rgba(0,0,0,.3); margin:0 0 10px 0; font-weight:400; padding:10px 15px; font:16px Arial; cursor:pointer; text-align:center; color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.contact-form-name,.contact-form-email,.contact-form-email-message { max-width:320px; width:100%; font-weight:bold; }
.contact-form-name { background:#f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzbIiQuJPjVwJftEW4GQg_jL9xZ6rCS5P6Zc_N-ZQiT51JqdqqzPZNnJT9vFK3yd9Zl7fZs2y5Kutkri6SWNBilqo3KdNCYjszyRtbZ4L58Ku_uYQo5TK73RZJDbYgwRJ0ep3vaPL4n04/s320/name.png) no-repeat 7px 8px; background:#f3f3f3; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; box-shadow:inset -2px 2px 3px #ddd; vertical-align:top; }
.contact-form-email { background:#F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPq6HhucAYwYYC4mSZSZ2SWBxy_7HtcZFwbsWA3jxQLqFeIvTkaHFOc-uPxvgjcyG0DA4H8i9AQIHes-f7N0EjZr4Bi4vvH_3nRZ1j0Nd8_XZAeDkH5KvP6V7I7dUd2NSzRKBxX7eTECw/s320/email.png) no-repeat 7px 10px; background-color:#F2F2F2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; vertical-align:top; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-email:hover,.contact-form-name:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:5px 15px 5px 28px; }
.contact-form-email-message:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:10px; }
.contact-form-email-message { background:#FFF; background-color:#f2f2f2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:arial; font-size:13px; margin:0; margin-top:5px; padding:10px; vertical-align:top; max-width:320px !important; height:150px; border-radius:4px; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-button { cursor:pointer; height:32px; line-height:28px; font-weight:bold; border:none; }
.contact-form-button { display:inline-block; zoom:1; *display:inline; vertical-align:baseline; margin:0 2px; outline:none; cursor:pointer; text-align:center; text-decoration:none; font:14px/100% Arial,Helvetica,sans-serif; padding:.5em 2em .55em; text-shadow:0 1px 1px rgba(0,0,0,.3); box-shadow:-1px 2px 3px #ddd; }
.contact-form-button:hover { text-decoration:none; }
.contact-form-button:active { position:relative; top:1px; }
.buslhitman-button-color { color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.buslhitman-button-color:hover { background:#f47c20; }
.buslhitman-button-color:active { color:#fcd3a5; }
.contact-form-name { background:#F3F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzbIiQuJPjVwJftEW4GQg_jL9xZ6rCS5P6Zc_N-ZQiT51JqdqqzPZNnJT9vFK3yd9Zl7fZs2y5Kutkri6SWNBilqo3KdNCYjszyRtbZ4L58Ku_uYQo5TK73RZJDbYgwRJ0ep3vaPL4n04/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>

Masih dalam mode HTML langsung saja kamu publikasikan, kalok kamu kembali ke mode Compose maka Contact Form ini akan berantakan...
Jika sudah anda Publikasikan silahkan cek apakan sudah terterap di blog/website kamu..

==>Oky sampai di sini dulu untuk penjelasannya kali ini ya shobat, jika ada kesalahan yang terjadi silahkan cepat melapor, melalui Kotak Komentar/Halaman Komentar yang sudah kami sediakan untuk anda...

SEMOGA SUKSES

Cara Membuat Contact Form keren

Chord yang Digunakan 0