Cara Membuat Contact Form di Blogger dengan Simple dan Cepat
Contct Form memiliki fungsi penting agar pengunjung dapat menghubungi pemilik web
dan alasan saya menulikan tutorial adalah untuk mendokumentasikan apa yang telah saya coba dan menarik untuk di simpan dalam tulisan dan untuk suatu saat saya sendiri membutuhkan kembali tutorial ini untuk saya sendiri
dari beberapa tutorial cara membuat contact form pada blogger/blogspot ada yang menggunakan pihak ketiga dalam membuat contact form ini, dimana jika menggunakan pihak ketiga caranya lumayan ribet
tapi dengan cara ini cukup simple dan cepat karena menggunakan fasilitas yang sudah ada di blogger sendiri
inti dari cara kerja dari pembuatan contact form ini adalah kita menambahkan widget Contact Form bawaan dari blogger, lalu menambahkan kode script yang membuat contact form tersebut di sembunyikan..
pertanyaannya kenapa harus disembunyikan?,
karena jika tidak disembunyikan dengan script, contact form tersebut akan nampak atau kelihatan di semua halaman web
dan setelah contact form bawaan itu disembunyikan, lalu kita menambahkan lagi kode script untuk disimpan di halaman tertentu, jadi kita hanya bisa menemui halaman contact form hanya pada satu halaman saja
ada 3 langkah berikut tutorialnya
#1. Langkah Pertama,
pada saat kita sudah masuk ke akun blogger kita pilih Tata Letak ----> lalu pilih More Gadgets/Gadget Lainnya -----> dan pilihlah Contact Form
berikut gambarnya
#2 Langkah Kedua,
pada dashboard blog kita pilih Theme/Template ---> lalu Edit Theme/Templatedan cari kode </head> bisa menggunakan ctl+f agar cepat
setelah ketemu kode </head> letakan script dibawah ini di atas kode </head> dan simpan theme/template nya
<style type='text/css'>
#ContactForm1{display:none}
</style>
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
/* Contact form */
#ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:70%;height:auto;margin:5px auto 15px;padding:10px;background:#ebebeb;border:1px solid #ccc;color:#777;border-radius:3px;box-shadow:0 4px 0 0 #c7c5c7}
#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fffff7;outline:0}
#ContactForm1_contact-form-email-message{width:95%;height:170px;margin:5px auto;padding:10px;background:#ebebeb;border:1px solid #ccc;color:#777;font-family:Arial,sans-serif;border-radius:3px;box-shadow:0 4px 0 0 #c7c5c7}
#ContactForm1_contact-form-submit{display:block;height:35px;float:left;color:#FFF;padding:0 20px;margin:10px 0 5px;cursor:pointer;background-color:#f4836a;box-shadow:0 4px 0 0 #c75b45;border:1px solid #eb7d67;border-radius:3px;text-shadow:0 1px 0 #de5135}
#ContactForm1_contact-form-submit:hover{background-color:#f5785f}
#ContactForm1_contact-form-submit:active{position:relative;top:2px;box-shadow:0 2px 0 0 #c75b45}
#ContactForm1_contact-form-submit:focus{outline:0}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:15px;text-align:left}
@media screen and (max-width:768px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:96%}
}
@media screen and (max-width:480px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:94%}.post-body{margin:0 15px}
}
</style>
</b:if>
#3. Langkah Ketiga,
Pada dashboard blog kita pilih Pages/Laman ---> lalu pilih New Page/Laman Baru ---> Setelah itu kita pindakan atau klik dari Compose ke HTML lalu Pastekan script dibawah ini di bagian HTML tersebut
<div dir="ltr" style="text-align: left;" >
Silahkan isi form di bawah ini untuk menghubungi.
<br />
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br />
<div class="clear">
</div>
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
Beri judul halaman tersebut dengan nama Contact
demikian tutorial cara membuat contact form di blogger / blogspt
sumber:
kompiajaib
bungfrangki
