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 <!-- script yg di hapus -->
5. kemudian membuat page/halaman contact us. sisipkan script berikut di letakan di HTML :
<div class='widget ContactForm' id='ContactForm1'>6. Hasil contact us menggunakan css, anda juga bisa customize sendir css nya dengan sesuka hati.
<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>
Demikian postingan Tutorial blog dan Tips Blog mengenai Cara mudah 100% membuat Contact form di blog , semoga ini yang anda cari :-)
DEMO
Mantapp.. pertamax
ReplyDeleteMatoor Suwon Mas Mantab terimakasih
ReplyDeleteGoogle Apk Center