Cara membuat Formulir Kontak di Laman Blog

Formulir kontak adalah bagian bisa di bilang cukup penting bagi kelegkapan sebuah blog, blogger sendiri pada pada dasarnya sudah menyiapkan menu khusus yang di gunakan untuk membuat formulir kontak tetapi formulir kontak yang di siapkan oleh blogger hanya bisa di pakai di Gadget Sedangkan yang kita inginkan atau umumnya formulir kontak pemasangannya di dalam Laman.

Walaupun begitu kita bisa membuat formulir kontak yang tadinya berada di Gadget kita bisa memindahkannya di dalam laman tetapi ada penambahan kode khusus yang telah kita persiapkan terlebih dahulu, nah untuk lebih mudah dalam pemuatanya kali ini saya siapkan tutorial Cara membuat Formulir Kontak di Laman Blog yang bisa kita praktekkan bersama-sama, berikut penjelasannya :

Yang pertama kali kita lakukan adalah menambahkan menu formulir kontak pada blog kita yaitu dengan cara buka halaman layout – add gadget – Formulir kontak, letakkan di samping

Formulir kontak sementara sudah jadi seperti yang di tunjukkan pada gambar.

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

Selanjtnya cari kode yang saya tunjukkan diatas untuk lebih mudah silahkan CTR + F

Copy dan paste tulisan contactForm1 pada kolom pencarian

Pada kebanyakan blog html yang seharusnya muncul yang nantinya akan kita hapus tidak muncul di blog tersebut tetapi hanya tanda titik-titik, hapus saja tanda titik-titik tersebt sesui yang di tunjukkan pada gambar.

Setelah tanda html tadi kita hapus lembar kontak yang muncul di samping akan menghilang, nah sekarang yang akan kita lakukan adalah membuat formulir kontak di dalam laman, caranya adalah sebagai berikut.

Silahkan buka lama baru dan copy semua code html berikut di dalam laman, isi judul sesuai kesukaan anda dan terahir publish.

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

<div class='seocips-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 seocips-button-color' type='reset' value='Clear'/>

<input class='contact-form-button contact-form-button-submit seocips-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>
.seocips-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; }
.seocips-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/AVvXsEju86ndqq1yLfhcfA9lHoySj5Oq-3ygIi3au_57DBL8AqwlZyyyfhfMqG4DTuhfXp-09kGS-ADhmRLeqRxUnua_wkg-VnNf0WktnwVBvJXMt48ufrAePcV55Ya8_wBwZozEYa0CzdBIZZ4/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/AVvXsEjyWo6DM_qkFZG0zn-ExmOoNdZroTg8_7vNJQoNOIk_0N6gUUjnogR7a6jSdX0XYld3HS8_8hgkG_irc7RMd91e6KfhJi6YqeL-d4oU2OkBDu_cgb_ayoWeoJbWJ_8-F6EFvQ8HP3h3s9o/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; }
.seocips-button-color { color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.seocips-button-color:hover { background:#f47c20; }
.seocips-button-color:active { color:#fcd3a5; }
.contact-form-name { background:#F3F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju86ndqq1yLfhcfA9lHoySj5Oq-3ygIi3au_57DBL8AqwlZyyyfhfMqG4DTuhfXp-09kGS-ADhmRLeqRxUnua_wkg-VnNf0WktnwVBvJXMt48ufrAePcV55Ya8_wBwZozEYa0CzdBIZZ4/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>

Kode yang di Copy dalam laman, copy dalam kolom html

Dan lihat hasilnya, sekarang anda sudah memiliki formulir kontak di dalam laman, walaupun sederhana setidaknya formulir kontak ini sudah bisa jadi pelengkap di blog kita dan bisa kita gunakan untuk hal-hal lain yang sifatnya memerlukan formulir kontak.