Cara Membuat Halaman Contact Us Di Blog

Cara Membuat Halaman Contact Us Di Blog - Pada kali ini kita akan membuat halaman contact us atau membuat form kontak pada halaman statis blog. Halaman contact us sangat penting untuk menunjang kredibilitas sebuah blog. Para webmaster juga mengatakan bahwa salah satu syarat diterima adsense adalah dengan memiliki halaman contact us di blog. Blogger sendiri telah menyediakan widget form kontak, namun terkesan lucu bila kita hanya memasang di sidebar. Nah, bagi yang ingin membuat halaman contact us di blog, simak langkah berikut.

Live Demo

Membuat Widget Contact Form

• Masuk ke blogger.
• Klik menu tata letak.
• Klik tambahkan element/ add gadget.
• Lalu pilih Gadget lainnya.
• Kemudian klik Formulir kontak.
• Klik Simpan

• Klik menu template.
• Edit html.
• Cari "ContactForm1" tanpa tanda kutip
• Setelah ketemu hapus kode yang berada diantara <b:includable id='main'>

 <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>

     ............................

</b:includable>
  </b:widget>
</b:section>

• Klik Simpan.

Membuat Halaman Contact Us

Sekarang saatnya kita membuat halaman contact us. Anda bisa membuatnya di halaman statis atau di halaman postingan. Tapi saran saya buatlah di halaman statis, agar widget contact us tidak muncul pada feed blog.

CSS Halaman Contact Us

• Login ke akun blogger.
• Kemudian klik menu template.
• Klik edit html.
• Pastekan css berikut diatas ]]></b:skin> atau </style>.

.tapike-contact-form { margin: 0 auto; width: 330px; } .contact-form-name, .contact-form-email, .contact-form-email-message { max-width: 320px; width: 100%; font-family: Roboto, Arial, Tahoma; } .contact-form-name, .contact-form-email { border: 1px solid #f3f3f3; background: #f9f9f9; box-sizing: border-box; color: #A0A0A0; font-size: 13px; height: 35px; margin: 0; margin-top: 5px; padding: 0 10px; box-shadow: inset -2px 2px 3px #ddd; outline:none; } .contact-form-email-message { border: 1px solid #f3f3f3; background: #f9f9f9; box-sizing: border-box; color: #A0A0A0; font-size: 13px; padding: 10px; box-shadow: inset -2px 2px 3px #ddd; font-style: normal; } .contact-button { color: #fff; border: 0; background: #e75151; padding: 5px 15px; cursor:pointer; outline:none; } .contact-button:hover { background: #000000; } .contact-notif {}

HTML Halaman Contact Us

• Login ke akun blogger.
• Kemudian klik Laman.
• Pilih dan klik laman baru.
• Paste html berikut di tab HTML. (disebelah tab compose).

<div class='tapike-contact-form'>
<form name='contact-form'>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' placeholder='Name' required/>
<br/><br/>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email'  size='30' type='email' placeholder='Email' required/>
<br/><br/>
<textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  placeholder='Message' required></textarea>
<br/><div class='contact-notif'>
<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>
<input class='contact-form-button contact-form-button-submit contact-button' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<input class='contact-form-button contact-form-button-submit contact-button' type='reset' value='Clear'/>
</form>
</div>

• Publikasikan

Demikianlah penjelasan saya mengenai cara membuat halaman contact us atau cara membuat form kontak pada halaman statis blog. Semoga artikel ini dapat bermanfaat bagi kita semua. Jangan lupa like dan share.