Cara Membuat Halaman Kontak atau Formulir Kontak (Contact Form) di Blogger sangat mudah. Yaitu dengan membuat halaman baru (new page) dan masukkan kode formulir kontak. Beres!
Lihat Demo Halaman Kontak
Halaman kontak memudahkan pengunjung menghubungi admin blog, misalnya mau pasang iklan, kerja sama, dan sebagainya.
Degan halaman kontak ini, pembaca tidak usah membuka akun email untuk mengirimkan email ke admin blog. Cukup menggunakan contact form ini, pesan otomatis terkirim ke email Gmail.
Adanya halaman kontak ini mengesankan blog kita profesional dan "serius". Halaman kontak ini juga berfungsi saat kita membuat Halaman Disclaimer.
Cara Membuat Halaman Kontak (Contact Form) di Blogger
Berikut ini cara membuat halaman statis berisi formulir kontak:1. Page > New Page
2. Isi judul dengan Kontak
3. Klik mode HTML di kiri atas
4. Copas kode berikut ini:
<h4>Contact Form</h4>
<br/>
<form name="contact-form">
<p>
</p>
Nama
<p>
</p>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p>
</p>
Alamat Email <span style="color: red; font-weight: bolder;">*</span>
<p>
</p>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p>
</p>
Isi Pesan <span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p>
</p>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<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 type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
#ContactForm1{
display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #fffff7;}
#ContactForm1_contact-form-email-message{
width: 95%;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 550px;margin-top:35px;float:left}
</style>
5. Publish!
Kini halaman kontak sudah ada di blog Anda. Tinggal copy linknya ke Navigasi Menu. Good Luck!
hasilnya: