Cara Membuat Form Contact di Blogger

Secara default blogger akan memungkinkan Anda untuk menambahkan widget terbaru yaitu Contact Form ke sidebar blog Anda, tapi kali ini kita akan Mencoba membuatnya di Static Page atau halaman statis agar Memberikan tampilan lebih perfesional

DEMO

Membuat form contact blogger

Langkah 1 : Tambah gadget

1. Pergi ke blogger> Tata Letak

2. Klik Tambahkan gadget

3. Selanjutnya klik pada "Lainya"   dan kemudian memilih widget pertama seperti yang ditunjukkan di bawah ini:

     4. Sekarang Anda telah berhasil menambahkan atau dengan kata lain terdaftar widget formulir kontak Anda dengan blogger.

     5. Jangan Hapus gadget ini dan biarkan utuh. Jika Anda mencoba untuk pernah menghapusnya maka formulir kontak Disesuaikan bahwa kami akan kode tidak akan bekerja.Kami pasti akan Sembunyikan widget ini dari sidebar.

Langkah 2 : Tambahkan CSS

#ContactForm1{display:none}
Copy kode diatas tepat diatas  ]]></b:skin>
kode tersebut berfungsi untuk menyembunyikan atau menghidden widget form contact yang telah ditambahkan pada sidebar blog.

Langkah 3 : Buat Halaman Baru

Tambahkan Semua kode di bawah ini Pada halaman, Pilih mode HTML jangan Compose.

<div id="contact_wrap">
<h2>
Hubungi Kami</h2>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<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>
</div>

<style type='text/css'>  CSS Kontak Form (modifikasi sesuai selera)

#ContactForm1{
margin: 20px auto;
padding: 18px 20px;
width:310px;
background: #fff;
background-clip: padding-box;
border: 1px solid #172b4e;
border-bottom-color: #142647;
border-radius: 5px;
background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
background-image: radial-gradient(cover, #437dd6, #3960a6);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3),
inset 0 0 1px 1px rgba(255, 255, 255, 0.1),
0 2px 10px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3),
inset 0 0 1px 1px rgba(255, 255, 255, 0.1),
0 2px 10px rgba(0, 0, 0, 0.5);
}
#ContactForm1 h2 {
margin-bottom: 20px;
font-size: 16px;
font-weight: bold;
color: black;
text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
#ContactForm1_contact-form-name,
#ContactForm1_contact-form-email {
display: block;
width: 250px;
height: 37px;
margin-bottom: 20px;
padding: 0 9px;
color: white;
text-shadow: 0 1px black;
background: #2b3e5d;
border: 1px solid #15243b;
border-top-color: #0d1827;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35),
rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35),
rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35),
rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35),
rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3),
0 1px rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3),
0 1px rgba(255, 255, 255, 0.2);
}
#ContactForm1_contact-form-email-message {
width: 250px;
height: 170px;
padding: 12px 20px 0px 20px;
margin: 0 0 20px 0;
background: #5E768D;
background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%);
/* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D));
/* webkit */ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
-moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2;
font-family: sans-serif; font-size: 16px; color: #f2f2f2; text-transform: uppercase; text-shadow: 0px -1px 0px #334f71;
}
#ContactForm1_contact-form-email-message:focus,
#ContactForm1_contact-form-name,
#ContactForm1_contact-form-email:focus {
outline: 0;  background-color: #32486d;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3),
0 0 4px 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3),
0 0 4px 1px rgba(255, 255, 255, 0.6);
}
#ContactForm1_contact-form-submit {
display: block;
width: 150px;
height: 37px;
margin-bottom: 15px;
font-size: 14px;
font-weight: bold;
color: #294779;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
background: #adcbfa;
background-clip: padding-box;
border: 1px solid #284473;
border-bottom-color: #223b66;
border-radius: 4px;
cursor: pointer;
background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5),
inset 0 0 7px rgba(255, 255, 255, 0.4),
0 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5),
inset 0 0 7px rgba(255, 255, 255, 0.4),
0 1px 1px rgba(0, 0, 0, 0.15);
}
#ContactForm1_contact-form-submit:active {
background: #a4c2f3;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4),
0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4),
0 1px rgba(255, 255, 255, 0.1);
}
</style>

Maaf Mungkin Untuk Tampilanya/CSS widget form contact diatas tidak sesuai dengan demo.
jadi silahkan kreasikan sendiri.

Simpan