Cara mudah 100% membuat contact form di blog

Masasep : contact form atau contact us adalah halaman blog yang bertujuan untuk berkomunikasi antara pengunjung dengan pemilik blog secara pribadi (via email), hampir setiap situs atau website ada halaman contact.

untuk itu bagi pembaca yang ingin membuat contact form, ikuti step demi step nya dengan baik, karena cara ini cara paling mudah 100% membuat contact form di blog. dan contact form bawaan dari blogspot.

1. langsung saja menuju Layout-add a gadget - more gadgets, pilih contact form

2. lalu masukan titlenya. contoh : contact us, kemudian klik SAVE.

hasilnya akan seperti gambar dibawah ini

3. Untuk memperindah tampilannya cukup tambahkan css di template-edit html, cari sintaks <b:skin>...<>/b:skin> kemudian klik tanda panahnya lalu paste di bagian mana saja stelah tutup kurung kurawal "} paste disini". berikut adalah script css nya :

/* Contact Form Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

4. selanjutnya menghapus script bawaan widget nya di tempalte-edithtml . cari script berikut :

hapus script mulai dari <b:if cond='data:title != ""'> sampai <b:include name='quickedit'/>, atau bisa juga script di jadikan commentar dengan cara

5. kemudian membuat page/halaman contact us. sisipkan script berikut di letakan di HTML :

<div class='widget ContactForm' id='ContactForm1'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>Name</p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>E-mail *</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p>Message *</p>
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</form>
</div>
</div>
</div>