Cara Membuat Contact Form Blogger Simple dan Cepat

Cara Membuat Contact Form di Blogger dengan Simple dan Cepat


contact




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

contact_form

#2 Langkah Kedua, 

pada dashboard blog kita pilih Theme/Template  ---> lalu Edit Theme/Template
dan 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 == &quot;static_page&quot;'>
<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

0 Response to "Cara Membuat Contact Form Blogger Simple dan Cepat"

Post a Comment

adv

About

www.Resistor.ID sebelumnya bernama 0sbr0.blogspot.com

 www.Resistor.ID adalah  web tempat berbagi informasi, elektronika, teknologi dan lain - lain yang sekiranya memberi manfaat.

Seperti yang sudah banyak orang ketahui atau mungkin ada yang belum mengetahui apa itu Resistor dan kenapa memilih Resistor sebagai nama web ini ?

baca lebih lanjut