Cara Membuat Halaman Contact US Keren Di Blog

Halaman contact us berguna untuk pengunjung blog yang ingin menghubungi pemilik blog secara Privasi.
Seperti yang sudah saya sebutkan di atas, fungsi Contact us adalah sebuah sarana bagi pengunjung blog untuk menghubungi pemulik blog, baik untuk menanyakan prihal yang penting atau memberikan kritik dan saran secara pribadi.

Walaupun sudah ada kolom komentar yang bisa dijadikan sarana bertanya atau memberi kritik dan saran, Contact Us tetaplah penting, karena sifatnya yang privasi.

Gimana Cara Membuat Halaman Contact Us Di Blog?

Pertama buka Dashboard Blogger kalian -> Pilih Tata Letak -> Tambah Gatget -> Pilih Formulir Kontak Jika sudah klik Simpan.

Kembali ke Dashboard Blogger kalian lalu pilih menu Halaman -> Buat Halaman Baru -> Berinama Contact Atau Sesuka hati kalian, lalu buka Tampilan HTML dan Tempelkan Kode di bawah ini.

Copy dan Tempelkan Kode dibawah ini Jika Sudah Lalu Publikasikan:

<div dir="ltr" style="text-align: justify;">
Silahkan isi pesan melalui form di bawah ini untuk menghubungi kami. Jika tidak ada halangan dan kesibukan lainnya, kami akan langsung merespon dengan cepat pesan yang Anda kirimkan. Terima kasih
<br />
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan" /><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>

Kembali ke Dashboard Blogger kalian lalu pilih Tema -> Edit HTML -> Letakan Kode di bawah ini tepat di atas Kode </head>.

<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:50px;margin:0;padding:10px;background:#fbfbfb;border:1px solid #ccc;color:#777;border-radius:3px;}
#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fff;outline:0}
#ContactForm1_contact-form-email-message{width:95%;height:170px;margin:0;padding:10px;background:#fbfbfb;border:1px solid #ccc;color:#777;border-radius:3px;}
#ContactForm1_contact-form-submit{display:block;height:35px;float:left;color:#FFF;padding:10px;margin:0;cursor:pointer;background-color:#6e9ee6;border:1px solid #6e9ee6;border-radius:3px;}
#ContactForm1_contact-form-submit:hover{background-color:#3c3c3c}
#ContactForm1_contact-form-submit:active{position:relative;top:2px;}
#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>

Jika sudah Klik Simpan