Cara Membuat Form Contact Us Pada Halaman Statis di Blogger

Cara Membuat Form Contact Us Pada Halaman Statis di Blogger - Laman Kontak pada dasarnya di platfrom blogger sendiri sudah disediakan dalam bentuk widget yang nanti nya dapat di pasang pada sidebar blog kita, namun bagaimana jika kita menginginkan widget tersebut di pindahkan menjadi sebuah laman tersendiri,

Apa pentingnya form ini?
Contact form bisa dibilang sangat penting, karena salah satu unsur dari blog adalah pengunjung blog tersebut. Contact form digunakan supaya pengunjung blog kita dapat mengirim laporan, pemberitahuan, kritik dan saran, juga dapat menghubungi kita melalui sebuah email. Entah itu tentang blog sobat ataupun urusan pribadi.

Tanpa panjang lebar lagi langsung saja kita praktekan

Cara Membuat Form Contact Us Pada Halaman Statis di Blogger

1. Login ke Akun Blogger Anda
2. Pilih Menu Laman Buat Laman Baru
3. Copykan kode dibawah ini di mode HTML jangan di Compose


<div style="text-align: justify;">
<div style="text-align: left;">
Silakan isi form di bawah ini untuk menghubungi admin Wa'rung Blog. 
Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung 
merespon pesan yang Anda kirimkan.</div>
<br /></div>
<form id="contact-form" name="contact-form">
<input box-sizing:border-box="" id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
<input box-sizing:border-box="" id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />
<textarea box-sizing:border-box="" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" /> 
<br />
<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>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
#contact-form{margin:auto;max-width:100%}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-sizing:border-box; rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-sizing:border-box; rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-sizing:border-box; rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{display:block;height:40px;float:left;color:#FFF;padding:0 20px;margin:10px 0 5px;cursor:pointer;background-color:#34495e;border:0px;border-radius:3px;text-align:center;letter-spacing:.5px;}
#ContactForm1_contact-form-submit:hover{background:#3498db;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0}
.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross{line-height:40px;margin-left:5px;}
.post-body input{width:initial}
@media only screen and (max-width:100%px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>

4. Klik Pratinjau Untuk Melihat Tampilan Form Kontak yang sudah di buat tadi
5. Publikasikan

Untuk melihat contoh contact form anda bisa lihat disini : DEMO

Selesai. Gimana Mudah kan? Itulah Cara Membuat Form Contact Us Pada Halaman Statis di Blogger