Cara Membuat Contact Form Yang Simpel

Posted by Serba Serbi Bisa Posted on September 11, 2016

Cara membuat kontak form di blog memang banyak caranya, jika anda tertarik dengan kontak form di blog ini cara nya gampang dan sederhanan sesuai dengan judul: cara membuat contact form yang simpel

Pertama masuk blogger dan langsung ketampilan tata letak dan tambahkan gedget dimana saja terserah anda.

ilustrasi:

Jika sudah ditambahkan, Lalu Simpan Pengaturan, Lalu Edit Html dan cari kode sperti berikut

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
Hapus Beberapa kode Hingga tampilan seperti ini
</b:includable>
</b:widget>
</b:section>

ilustrasi :

setelah itu simpan template dan kembali ke Tata Letak dan buat entri atau Halaman Baru untuk membuat tampilan Form Kontak nya / untuk menampilkan contact form bisa dibuat didalam Postingan atau halaman. terserah mau dimana dipasangnya.
copy-paste kode berikut di dalam halaman HTML anda
NB: Jangan membuatnya di mode compose karena form contact akan berantakan

<div class="kangobboy-contact-form">
<div class="form">
<!-- Custom Contact Form By kang obboy start -->
<div class="kangobboy-contact-title">
Contact Form
</div>
<form name="contact-form">
<!-- Name Field -->
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
<p></p>
<!-- Email ID Field -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
<p></p>
<!-- Message Field -->
<textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Leave Your Message..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
<p></p>
<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit seocips-button-color' type='reset' value='Clear'/>
<!-- Send Button -->
<input class='contact-form-button contact-form-button-submit seocips-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>
<!-- Validation -->
<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>
<!-- End Custom Contact Form By kang obboy -->
</div>
</div>
<style>
.kangobboy-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; }
.kangobboy-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 #253685; background:#213077; }
.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/AVvXsEhyJ8_OgP4iIrmQf-5eGSpHcE4cQPLnrW3KcPqy3FPqhqA1TSk1mSJzVAtO7n75Kp9zoJ-sh2vsb_Myk0zwwwhgS_xk0bf3VcwNVmFiTs3X6qZLzCdXWL7KsPLidoHKySzHSl-NGHuLdKx0/s320/name-form.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/AVvXsEiHSG8BGBNtaHr_Rp8o0GmEY0Z00xhO3LtxBY1Jrb1kJg8sfb_dLFHFhEoVGov7kblq0E7bLB1y5wLhe0jeSjv4u7kYGfnVQRAwKV1SIDlCOMjyapJ-uW_5cRtoMDYz4Gsh6VEeIUJbFEGX/s320/email-form.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; }
.kangobboy-button-color { color:#bdc2da; border:solid 1px #213077; background:#253685; }
.kangobboy-button-color:hover { background:#213077; }
.kangobboy-button-color:active { color:#bdc2da; }
.contact-form-name { background:#F3F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJ8_OgP4iIrmQf-5eGSpHcE4cQPLnrW3KcPqy3FPqhqA1TSk1mSJzVAtO7n75Kp9zoJ-sh2vsb_Myk0zwwwhgS_xk0bf3VcwNVmFiTs3X6qZLzCdXWL7KsPLidoHKySzHSl-NGHuLdKx0/s320/name-form.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>

Setelah dipasang di halaman atau postingan langsung saja klik Publikasikan.
Demikian cara membuat contact form yang sederhana di blog. semoga bermanfaat.