Memasang Widget Contact Form Pada Halaman Statis

Pada umumnya orang lebih suka memasang contact form pada sidebar karena caranya gampang dan langsung siap, tapi kali ini yang saya share kepada Anda Cara Memasang Widget Contact Form pada halaman statis, karena menurut saya penempatan tersebut sangat sangat cocok.

Sekarang saya akan menjelaskan bagaimana memasang widget contact form blogger ini pada halaman statis atau pada postingan. Penempatan contact form ini seperti screenshoot dibawah ini :

Sebagai DEMO-nya bisa Anda lihat widget contact form di blog ini.

• Demo

Bagaimana menurut Anda keren kan? hehehe...jika Anda mau memasangnya di blog/website silahkan Anda ikuti tutorial berikutnya.

Langkah-langkah memasang widget contact form yaitu sebagai berikut :

1. Tambahkan Widget Contact Form Blogger.

Cara menambahkannya, masuk ke menu Setelan  Tatak Letak  Tambahkan Gadget  Gadget Lainnya  Formulir Kontak lebih jelasnya Anda lihat gambar :

Untuk sementara biarkan Contact Form ada di widget / sidebar.

2. Tambahkan Halaman

Untuk menambahkannya, masuk ke halaman  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.

3. Menyembunyikan widget dan menambahkan CSS

Langkah ini adalah untuk menyembunyikan contact form yang ada di sidebar dan memodifikasi tampilan contact form. Tambahkan kode ini tepat diatas ]]></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;
}

Demikian artikel cara memasang widget contact form pada halaman statis, semoga bermanfaat..

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250