Cara Menambahkan Form Contact Sederhana Untuk Blogspot, Form contact penting sekali untuk sebuah blog agar jika ada hal - hal yang mau ditanyakan seputar isi artikel lebih leluasa untuk menjawabnya. Form contact dapat ditambahkan melalui widget maupun melalui laman blog dengan memasukkan kode html yang ada. Form contact katanya merupakan salah satu syarat mendaftarkan blog sebagai publisher Adsense, yaitu tempat periklanan terbesar yang mampu membayar dengan harga tinggi, dibandingkan jenis periklanan lain.
Langkah pertama Form Contact ditambahkan dulu melalui widget, dapat dilakukan dengan mudah yaitu sebagai berikut seperti contoh :
1. Masuk ke Draft. Blogger
2. Klik Tata Letak
3. Lalu Add Gadget
4. Cari Widget Kontak. Klik yang bertanda +
5. Widget kontak sudah ada pada template Anda.
6. Jangan lupa untuk menyimpannya.
3. Lalu Add Gadget
4. Cari Widget Kontak. Klik yang bertanda +
5. Widget kontak sudah ada pada template Anda.
6. Jangan lupa untuk menyimpannya.
Form Contact Yang Ditambahkan diatas, mau kita hilangkan dari Template blog, jadi kita nanti dapat membuka Form Contact melalui laman blog kita, langkah selanjutnya yaitu :
1. Buka Template.
2. Klik Edit html.
3. Cari Kontak yang telah ditambahkan tadi dengan mengklik widget pada bagian menu. Setelah itu akan muncul kode kontak tadi. Seperti dibawah 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>
Setelah itu simpan template Anda, masih ada satu langkah lagi. Yaitu dengan cara Anda Klik Laman/ Page lalu klik lagi laman baru, seperti Anda akan membuat postingan dan jangan lupa, ubah kemode Html, masukan kode di bawah ini dan beri judul Contact Us atau Hubungi, berikut kodenya dan contoh gambarnya :
Baca Juga : Cara Mengganti Template di Blogspot Dengan Hasil Unduhan
Baca Juga : Cara Mengganti Template di Blogspot Dengan Hasil Unduhan
<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 == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' /><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 == "") {this.value = "Email ID";}' onfocus='if (this.value == "Email ID") {this.value = "";}'/><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 == "") {this.value = "Leave Your Message..";}' onfocus='if (this.value == "Leave Your Message..") {this.value = "";}'></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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge_-dVUxD6W2I7fzjMOHutT7TJxQ3ihke82SvxzgTLmXOnCTRBalmHHHMSzIoCC5FPIN96mB7s4g1uGASZMDVG1glAxTnUjXOAdGWfHmtG7hIZNJT4Ag4KVwLeZUUI1Ztyz8jWPq4VYIM/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/AVvXsEjy0NwKFPSn3F_ujsI69r_32fSRUlucX6mgVtg7A8biJy8brrypj3pSqjwBMTnyb-zuQQozy_vpVgklNW-XK97dMwKXY9SD9MEOMRBYuGqFXtcznLu4r7TgNdew9VNPbrgKdFOs5E27f20/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/AVvXsEge_-dVUxD6W2I7fzjMOHutT7TJxQ3ihke82SvxzgTLmXOnCTRBalmHHHMSzIoCC5FPIN96mB7s4g1uGASZMDVG1glAxTnUjXOAdGWfHmtG7hIZNJT4Ag4KVwLeZUUI1Ztyz8jWPq4VYIM/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }</style>
Untuk memastikan Form Contact yang Anda buat sukses atau tidaknya, Anda dapat melihat Pratinjau terlebih dahulu, lalu silahkan Anda Publikasikan.
Ini mengambil Contact Form dari Seocips. Demikian cara membuat contact form sederhana untuk Blogspot, selamat mencoba.
Baca Juga : Cara Memasang Meta Tag Pada Blogspot
Baca Juga : Cara Memasang Meta Tag Pada Blogspot
