Skip to content Skip to sidebar Skip to footer

Cara Membuat Formulir Kontak Di Blogger

Formulir kontak disebuah blog termasuk salah satu hal yang penting untuk dibuat. Pasalnya jika formulir kontak di blogger tidak ada, maka pembaca setia blog sobat akan sedikit bingun jika ingin mengajukan pertanyaan, atau mungkin hanya sekedar say hallo kepada sobat selaku penulis atau pemilik blog.

Ada juga beberapa artikel yang mengatakan bahwa formulir kontak merupakan salah satu syarat jika sobat ingin mendaftarkan blog sobat menjadi penayang adsense. Dari itu artikel ini sengaja membahas mengenai cara membuat formulir kontak di blogger.

Cara mudah membuat formulir kontak


Adapun cara membuat formulir kontak di blogger adalah sebagai berikut:
  • Klik Layout --> Add a Gadget di sidebar
  • Klik More Gadgets --> klik/pilih Contact Form


  • Save, kemudian tempatkan form sesuai keinginan sobat.

Selanjutnya, kita membuat formulir kontak khusus langsung di blog, caranya:
  • Klik Page --> New Page
  • Beri judul halaman dengan Kontak
  • Klik pada mode HTML
  • Copas kode berikut ini:
<form name="contact-form">
<p></p>
Nama
<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">
#comments, #blog-pager, .breadcrumbs, .post-footer{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: 450px;
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: 450px;
margin-top:35px;
}
</style>
  • Kemudian jangan lupa sebelum Save, setting pada Option seperti pada gambar:


Fungsinya adalah:

1. Agar yang membaca tidak bisa memberikan komentar seperti pada artikel-artikel biasanya
2. Agar ketika menekan tombol Enter tidak memproses untuk mengirim tetapi kursor berpindah ke baris berikutnya.
  • Klik Publish
Nah, sekarang di blog sobat terdapat dua formulir kontak, satu bawaan gadget blog yang kedua formulir khusus yang kita buat tadi. 

Agar tidak double formulir maka kita akan menghidden atau menghilangkan formulir kontak bawaan blog, caranya:
  • Klik Template --> Edit HTML
  • Cari kode ]]></b:skin>, gunakan tombol Ctrl+F agar pencarian cepat
  • Copas kode berikut ini, letakkan pas di atas kode ]]></b:skin>
.widget.ContactForm,.widget #ContactForm1{display: none !important;}
  • Save, maka form akan hilang.
Sampai disini formulir kontak sudah selesai, silahkan uji coba form yang sudah dibuat tadi, semoga berhasil.