Cara Memasang Widget Contact Form pada Halaman Statis Blogger

Saat ini sudah banyak para blogger yang memasang contact form pada halaman statis. Tujuannya adalah agar pengunjung dapat menyampaikan unek-uneknya kepada si pemilik blog lewat contact form tersebut. Nantinya si pemilik blog dapat melihat pesan tersebut melalui emailnya. Tetapi, masih banyak juga blogger yang belum tahu cara memasang contact form pada halaman statis. Buat yang belum tahu, baca artikel ini baik-baik ya.

Sebenarnya blogger telah menyediakan fitur widget contact form. Namun widget ini kurang disukai oleh para blogger. Karena widget tersebut hanya dapat ditempatkan pada bagian widget (sidebar,footer,dsb).

Nah, kali ini saya akan memberikan trik agar widget contact form tersebut dapat terpasang pada halaman statis dan halaman postingan. Tampilan contact form ini pun sudah saya buat menjadi responsive. Untuk demo silahkan lihat gambar atau klik link demo di bawah ini.

Cara Memasang Widget Contact Form pada Halaman Statis Blogger

Cara Memasang Widget Contact Form pada Halaman Statis

Langkah 1 : Menambahkan Widget Contact Form Blogger

Buka Blogger > Tata Letak > Tambahkan Gadget > Gadget Lainnya > Formulir Kontak

Cara Memasang Widget Contact Form pada Halaman Statis Blogger

Biarkan widget Contact Form ada di sidebar untuk sementara.

Langkah 2 : Buat Halaman Statis Baru

Laman > Laman Baru > Beri judul terlebih dahulu misal “Contact” > Pilih mode HTML lalu letakkan kode di bawah ini ke dalam halaman editor.

<form name="contact-form">
Nama<br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
<br />
Alamat Email <span style="color: red; font-weight: bolder;">*</span><br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
<br />
Isi Pesan <span style="color: red; font-weight: bolder;">*</span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-clear" type="reset" value="Clear" />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<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>
<br />
<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Catatan :

  • #comments : untuk menyembunyikan komentar
  • #blog-pager : untuk menyembunyikan blog pager
  • .breadcrumbs : untuk menyembunyikan breadcrumbs
  • .post-footer{display:none} : untuk menyembunyikan post footer (tombol share,dan sebagainya)

Silahkan hapus kode tersebut jika tidak diperlukan.

Setelah itu klik “Publikasikan”

Langkah 3 : Menyembunyikan Widget Contact Form pada Sidebar dan Menambahkan CSS

Agar tampilan contact form terlihat elegan dan widget contact form pada sidebar dapat dihilangkan, silahkan letakkan kode di bawah ini di atas kode ]]></b:skin>

/* -- CSS Contact Form -- */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 70%;
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 5px 0 0;
cursor: pointer;
background: #2B5797;
border: 1px solid #2B5797;
font-weight: bold;
}
#ContactForm1_contact-form-submit:hover {
background:#fff;
border: 1px solid #2B5797;
color: #19ABEA;
}
#ContactForm1_contact-form-clear {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 5px 0 0;
cursor: pointer;
background: #2B5797;
border: 1px solid #2B5797;
font-weight: bold;
}
#ContactForm1_contact-form-clear:hover {
background:#fff;
border: 1px solid #2B5797;
color: #19ABEA;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}
@media screen and (max-width: 768px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 96%;}
}
@media screen and (max-width: 480px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 94%;}
}

Selanjutnya klik tombol “Simpan template” dan lihat hasilnya.

Sekian tutorial kali ini mengenai cara memasang widget contact form pada halaman statis. 

Leave a Reply