Membuat Contact Form (Layanan Hubungi Kami/Contact Us) Dengan Mudah Di Blogger Blogspot
Memasang Contact Form di blog merupakan salah satu bagian yang penting dan berfungsi sebagai media korenspondensi formal dan personal. Meskipun sudah ada banyak media lain, namun halaman kontak menjadi pilihan karena menjaga privacy bagi kedua belah pihak, yaitu pemilik blog/website dan visitor/customer (Pengunjung Website).
Membuat Contact Form di Blog
Contact form sangatlah penting untuk blog CaraCiri sendiri maupun para pembaca karena jika mereka ingin menyampaikan sesuatu kepada pemiliki blog, mereka dapat menghubungi pemilik Website menggunakan widget ini. Biasanya contact form diberi judul "Hubungi Kami" atau "Contact Us" dan disediakan oleh Blogger hanya bisa digunakan untuk widget blog, tapi dengan tutorial ini maka kita dapat memasangnya ke halaman blog kita. Nah berikut adalah cara membuat dan memasang widget ini ke halaman blog.
Memasang Widget Contact Form di Blog
Kita harus menambahkan widget contact form kedalam halaman yang kita buat. Caranya, buka halaman layout > Add gadget > Contact Form. Letakkan di sembarang tempat.
Nah untuk menghilangkan tampilan widget Contact Form tersebut dan tentu tidak akan menghilangkan pungsinya sebagai Contact Form itu sendiri, yang harus anda lakukan sebagai berikut:
Kembali ke dashboard > Template > Edit HTML.
Lalu cari kode seperti dibawah ini dan hapus pada beberapa bagian.
< b:widget id = ‘ContactPorm1‘ locked = 'false‘ title = 'ContactForm‘ type =‘ContactForm‘> < b:includable id = 'main' >
<Hapus bagian ini>
< b: lncludable >
<b:widget>
</section>
Lebih Jelasnya Anda bisa Lihat Gambar dibawah ini.↓↓↓↓↓↓
Nah Setelah selesai menghapus /menghilangkan kode tersebut, sekarang simpan template anda.
Memang kita harus memasang dulu widgetnya kemudian menghapusnya seperti cara di atas, kalau tidak contact formnya tidak akan berfungsi. Jika sudah, sekarang tinggal memasukan kode dibawah ini ke halaman blog kamu.
Membuat Halaman Contact Us
Sekarang lanjutkan untuk membuat halaman "Contact us". Buat laman baru atau bisa juga membuat postingan baru, terserah kamu mau pilih yang mana. Jika sudah siap, letakan kode dibawah ini dengan mode HTML (sebelahnya compose) ke dalam halaman anda.<div class='caraciri-contact-form'>
<div class='form'>
<!-- Custom Contact Form By Caraciri start -->
<div class='caraciri-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 caraciri-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 caraciri -->
</div></div>
<style>
.caraciri-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; }
.caraciri-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/AVvXsEgus-H3fHXp6bqBD7mhUqAiuD4x7rFulZriisC05TJdyyVEx3Bkt9oRVncO9_mNBYkiJ5HD2lrwf0f8F8D1lxCWSUNw41NJIay4SxmfPPWOREiWESNh_9-04Lolkm90YIhC80xS5_iIc8E/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/AVvXsEiGAj1HvmPmBUz5gEp2LXhCTGlIOP9TV5-fI5SWXEGzbcwXjqIWqPFCTc72zww8ufPag6VL7aFSqGFQ4QQhawGcPcLIZdOgZba6CQdVcVqdBrISiLVlWEfCXbruVdVoV8FIEvf2W3r_U4w/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; }
.caraciri-button-color { color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.caraciri-button-color:hover { background:#f47c20; }
.caraciri-button-color:active { color:#fcd3a5; }
.contact-form-name { background:#F3F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgus-H3fHXp6bqBD7mhUqAiuD4x7rFulZriisC05TJdyyVEx3Bkt9oRVncO9_mNBYkiJ5HD2lrwf0f8F8D1lxCWSUNw41NJIay4SxmfPPWOREiWESNh_9-04Lolkm90YIhC80xS5_iIc8E/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>
Masih dalam mode HTML dan langsung saja pubilkasikan, jika kamu kembail dulu ke mode compose kemudian di publikasikan contact formnya bisa berantakan.
Memang widget diatas tampilannya simple dan sederhana, tapi cukuplah menurut saya. Asalkn berpungsi dengan baik. Anda dapat menguji cobanya dengan mengirimakan pesan menggunakan Contact form ini dan periksa apakah pesannya muncul di email gmail (mail blogger) Jika ada pesan Gmail masuk pesan Blogger, tandanya Anda sudah berhasil.
Nah itulah Tutorial cara bagaimana menambahkan Widget Contact Form pada blog, Semoga blog kalian bisa terlihat lebih profesional dengan adanya Contact Form (Cotact Us/Hubungi Kami)
Bagi anda yang menyukai Tutorial ini, di tunggu Kritik, Saran & Komentarnya.
Semoga bermanfaat, Sekian dan terimakasih.
Baca Juga Cara:
Menambahkan Label di Blogspot
Setting Robbot.txt SEO friendly
Mengatasi H1 Zero
Post a Comment for "Membuat Contact Form (Layanan Hubungi Kami/Contact Us) Dengan Mudah Di Blogger Blogspot"