Cara Memasang Contact Form Di Halaman Statis

Cara Memasang Contact Form Di Halaman Statis - Widget Contact Form adalah widget yang biasa kita gunakan untuk memfasilitasi pengujung blog yang ingin mengirimkan pesan kepada kita melalui email. Widget ini merupakan widget yang cukup penting untuk kita pasang di blog, sebagai sarana mendapatkan feedback dari pengunjung, apalagi buat sobat yang memiliki toko online, maka widget contact form ini sangatlah penting keberadaanya.

Kabar baiknya, saat ini blogspot sudah menyediakan widget contact form ini, kalau biasanya kita menggunakan pihak ketiga untuk membuat contact form, seperti menggunakan EmailMeForm, FoxyForm dsb. Pada tips ini, saya akan share bagaimana memasang widget contact form pada halaman statis. Kenapa di halaman statis ? Karena banyak pengguna blogspot, terutama saya, yang kurang suka apabila widget ini di letakkan di sidebar. Jika sobat mengalamai hal yang sama seperti saya, silahkan ikuti tutorial ini, bagaimana meletakkan widget contact form di halaman statis :

Langkah 1 : Tambahkan Widget Contact Form Blogger

Untuk menambahkannya, masuk ke Setelan ► Tata Letak ► Tambahkan Gadget ► Gadget Lainnya ► Formulir Kontak

menambahkan contact form pada halaman statis

Untuk sementara biarkan Contact Form ada di widget / sidebar.

Langkah 2 : Tambahkan Halaman

Untuk menambahkannya, masuk ke Laman ► Laman baru ► Laman kosong. Tambahkan kode dibawah ini pada mode HTML bukan ~~Compose~~

<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">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Pada Menu Pilihan, pilih Tekan "Enter" untuk baris baru.

Klik Publikasikan.

Langkah 3 : Meyembunyikan Widget dan Menambahkan CSS

Langkah ini adalah untuk menyembunyikan contact form yang ada di sidebar dan memodifikasi tampilan contact form. Tambahkan kode ini di atas ]]></b:skin>

/* CSS Contact Form */
#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: 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;
}