Memasang Contact Form dibagian Halaman Statis

 Widget Contact Form di blogger memang sudah lama ada, namun widget ini jarang dipakai oleh pengguna Blogger. Mungkin alasannya adalah tampilan yang sederhana sehingga banyak pengguna blogger tidak menyukainya.

Tapi sebenarnya Contact Form bisa dihiasi dengan CSS agar dapat menyesuaikan keinginan kita, tutorial seperti ini memang sudah banyak yang membagikan, namun yang jelas ide akan berbeda-beda.

Demo 

Ada beberapa pakar mengatakan bahwa Contact Form ini sangat dianjurkan untuk dipasang agar daftar Iklan Adsense dapat diterima, namun saya tidak tahu pasti soal Iklan GA karena saya juga sering ditolak, jadi jangan tanya sama saya ya.

Langkah pertama tentunya harus tambahkan widget Contact Form.

Masuk ke Setelan >> Tata Letak >> Tambahkan Gadget >> Gadget Lainnya >> Formulir Kontak

Untuk langkah kedua, Masuk ke Laman >> Laman baru >> Laman kosong. Tambahkan HTML dibawah ini pada mode HTML bukan Compose. dan Pada Menu Pilihan di sebelah kanan, pilih Tekan "Enter" untuk baris baru, lalu Klik Publikasikan.

<center>
<div id="contact_wrap">
<h3>Contact Us</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" 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="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div style="max-width: 400px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</center>

Agar contact form yang ada di sidebar bisa hilang dan memodifikasi tampilan contact form. Tambahkan kode ini di atas ]]></b:skin> atau </style>

/* CSS Contact Form FateMan Farz*/
#ContactForm1{display:none;}
#contact_wrap {margin:auto;width:600px;height:380px;padding:25px;border-radius:3px;border:1px solid #444;background:linear-gradient(180deg,#f26c9a ,#ca3669 50%,#a12952);}
#contact_wrap h3{color:#e8f3f9;font: 20px Oswald;margin:0 -36px 20px -36px;padding:12px;text-align:center;text-shadow:2px 0 0 #1f4962;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;background:#3689b9;position:relative;text-transform:uppercase;}
#contact_wrap h3:before {content:' ';position:absolute;bottom:-10px;left: 0;width: 0;height: 0;border-style:solid;border-width:10px 0 0 10px;border-color: #266081 transparent transparent transparent;}
#contact_wrap h3:after {content: ' ';position:absolute;bottom:-10px;right:0;width:0;height:0;border-style:solid;border-width: 0 0 10px 10px;border-color:transparent transparent transparent #266081;}
#ContactForm1_contact-form-name{width:550px;height:auto;margin: 5px auto;padding: 10px 10px 10px 40px;background:#f6f6f6 url(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/s1600/user.png)no-repeat 10px center;color:#777;border:1px solid #ccc;border-radius: 4px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}
#ContactForm1_contact-form-email{width:550px;height:auto;margin: 5px auto;padding:10px 10px 10px 40px;background:#f6f6f6 url(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/s1600/pen.png)no-repeat 10px center;color:#777;
border:1px solid #ccc;border-radius: 4px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}
#ContactForm1_contact-form-email-message{width:580px;height:150px;margin:5px auto;padding:10px;font-family:Arial, sans-serif;background:#f6f6f6;color:#777;border:1px solid #ccc;border-radius:4px;box-shadow:rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}
#ContactForm1_contact-form-submit{width:95px;height:30px;float:left;color:#fff;font:15px Oswald;padding:0;cursor:pointer;margin:25px 0 3px 0 0;border-radius:4px;text-shadow:1px 0 0 #1f4962;box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color:#3689b9;border:1px solid #194f6d;}
#ContactForm1_contact-form-submit:hover {background:#4c9bc9;}
#ContactForm1_contact-form-error-message,  
#ContactForm1_contact-form-success-message{width:320px;margin-top:35px;}