Membuat Kontak Form responsiv keren Blog

Membuat Kontak Form responsiv keren Blog. Kali ini Seoco2 akan memberikan bagaimana caranya membuat kontak form atau formulir kontak keren responsiv di blog. Banyak cara untuk membuat kontak form atau formilir kontak di blog, namun hanya sedikit caranya membuat kontak form di blog keren dan responsiv. Bagaimana caranya membuat kontak form atau formulir kontak blog agar keren dan responsiv akan dibahas di blog seoco2 berikut ini. Tampilan kontak form responsiv adalah tampilan kontak form yang bisa diakses pada SmartPhone dan gadged.

Membuat Kontak Form keren responsiv buat blog
gambar kontak form keren responsiv
Membuat kontak form adalah faktor utama yang penting dalam sebuah blog, kontak form bertujuan untuk menunjukan kepada pembaca bahwa Kita serius dan berani bertanggung jawab atas blog yang Kita buat. Membuat kontak form responsiv agar bisa tampil sempurna di smartPhone dan gadged juga sangat penting. Dijaman sekarang sebagian besar pembaca menggunakan SmartPhon untuk mencari informasi di internet. Jika tampilan kontak form Anda responsif dan maksimal maka akan memudahkan bagi pembaca.

Caranya Membuat Kontak Form keren responsiv buat Blog.
Berikut adalah Caranya Membuat Kontak Form keren responsiv buat Blog, agar mudah dipahami sudah disertakan gambar cara membuat Kontak Form keren responsiv buat Blog.

Pasang Widgat Kontak Form di blog di halaman blog
Langkah pertama adalah memasang kontak form bawaan dari blogspot dengan cara masuk menu tata letak - tambah gadget (pilih gadget mana saja terserah) - kontak form.

Caranya Membuat Kontak Form keren responsiv buat Blog

Jika sudah lalu masuk ke menu template - edit html (lebih baik di unduh dulu templatenya biar kalau ada kesalahan tinggal unggah lagi, jadi tidak pusing) Baca caranya mengubah template blog dengan cara upload template. Cari kode html seperti ini <b:widget id='ContactForm1 . Untuk mempermudah gunakan Ctrl + F . Setelah ketemu kode , hapus kode dibawahnya , sehingga nanti kodenya menjadi seperti di bawah ini
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
Hapus bagian ini</b:includable>
  </b:widget>
</b:section>
Untuk lebih jelas silahkan lihat pada gambar dibawah ini
Caranya Membuat Kontak Form keren responsiv buat Blog

Untuk Caranya Membuat Kontak Form keren responsiv buat Blog harus memasang dulu widgatnya dan kemudian menghapus sebagian kode htmlnya. Jika sudah lalu save dan melanjutkan langkah selanjutnya untuk membuat Kontak Form keren responsiv buat Blog.

Memasang atau membuat Kontak Form keren responsiv buat Blog. Caranya memasang kontak form atau formulir kontak keren dan responsiv adalah dengan memasangnya di halaman blog. Silahkan Anda masuk ke menu halaman blog lalu buat halaman baru klik pada menu html jangan compose, ingat menu html bukan menu kompose .Beri judul kontak form, formulir kontak, Hubungi Saya atau contack My terserah selera Anda bagaimana baiknya.

Caranya membuat Kontak Form keren responsiv di menu halaman blog yaitu dengan cara memasang kode pada menu halaman di mode html , ingat mode  html bukan compose.!!

Copy paste kode dibawah ini 
<div class='seocips-contact-form'>
<div class='form'>
<!-- Custom Contact Form By Seocips start -->
<div class='seocips-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 seocips -->
</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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/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(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>
Masih pada mode html kemudian simpan dan publis, lihat hasilnya Anda sudah berhasil membuat  Kontak Form keren responsiv buat Blog. Bagaimana mudah bukan Caranya Membuat Kontak Form keren responsiv buat Blog. 

Source seocips.com

 
Back To Top