Cara membuat contact form sederhana

Cara membuat contact form sederhana - Jika anda inggin membuat contact form yg lebih sederhana langsung aja kita mulai tanpa bosa basi , anda bisa liat contoh gambarnya di bawah ini :

WWW.RHM-FILES.TK

 Memasang widget contact form di blog
- Kita harus menambahkan widget contact form yg kita buat caranya :
  Buka halaman layout >> tata letak >> add gadget >> contact form >> Letakan di sembarang tempat.

WWW.RHM-FILES.TK

Kemudian cari code seperti di bawah ini dan hapus pada beberapa bagian dan sisakan seperti di bawah ini
( Tulisan "hapus bagian ini" itu di hapus juga ye )

  <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'> Hapus bagian ini
</b:includable>
  </b:widget>
</b:section>

Nah sekarang simpan template nya
Membuat halaman contact -us 
Sekarang lanjutkan membuat halaman contact -us , Buat halaman baru atau bisa juga membuat postingan baru , terserah kamu , mau pilih yg mana , jika sudah siap letakan code di bawah ini dengan mengunakan mode HTML (Sebelahnya compose) Ke dalam halaman anda

<div class='seocips-contact-form'>
<div class='form'>
<!-- Custom Contact Form By Seocips start -->
<div class='seocips-contact-title'>
Contact Form
</div>
<form name='contact-form'>
<!-- Name Field -->
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
<p></p>
<!-- Email ID Field -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
<p></p>
<!-- Message Field -->
<textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Leave Your Message..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
<p></p>
<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit seocips-button-color' type='reset' value='Clear'/>
<!-- Send Button -->
<input class='contact-form-button contact-form-button-submit seocips-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>
<!-- Validation -->
<div style='text-align: center; max-width: 222px; width: 100%'>
<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>
</div>
</form>
<!-- End Custom Contact Form By seocips -->
</div></div>
<style>
.seocips-contact-form { background:#fff; box-shadow:-1px 2px 3px #ddd; font:12px arial; width:100%; max-width:320px; margin:20px auto; padding:15px; border:1px solid #ddd; }
.seocips-contact-title { box-shadow:-1px 2px 3px #ddd; text-shadow:0 1px 1px rgba(0,0,0,.3); margin:0 0 10px 0; font-weight:400; padding:10px 15px; font:16px Arial; cursor:pointer; text-align:center; color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.contact-form-name,.contact-form-email,.contact-form-email-message { max-width:320px; width:100%; font-weight:bold; }
.contact-form-name { background:#f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtJSwUayq-00J2AvChu2v7d2mI-SiyqHcqs0vuA5C_TKXfCzRvQOlS_FhxomnCeDKt98ftWcC1nDaQJBmo3kdBl_FHnFq5i2n0ZzH9BYa7aU9DT6bl54h3Nyr0ghMgoptzqFaA-XArU2M/s320/name.png) no-repeat 7px 8px; background:#f3f3f3; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; box-shadow:inset -2px 2px 3px #ddd; vertical-align:top; }
.contact-form-email { background:#F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeTcR297ikBOE3owGJg1BU37Hmtm_ktIU1bE7Yo6Up6x74OUi5xE4S9GpjFfR_LLBp257UuWINp5FA5wFxykMdFujFIllNt47QSn3PIOpcGgNGBM-mDkRCsmq_46GcgjKMcObQjaa1D_4/s320/email.png) no-repeat 7px 10px; background-color:#F2F2F2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; vertical-align:top; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-email:hover,.contact-form-name:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:5px 15px 5px 28px; }
.contact-form-email-message:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:10px; }
.contact-form-email-message { background:#FFF; background-color:#f2f2f2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:arial; font-size:13px; margin:0; margin-top:5px; padding:10px; vertical-align:top; max-width:320px !important; height:150px; border-radius:4px; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-button { cursor:pointer; height:32px; line-height:28px; font-weight:bold; border:none; }
.contact-form-button { display:inline-block; zoom:1; *display:inline; vertical-align:baseline; margin:0 2px; outline:none; cursor:pointer; text-align:center; text-decoration:none; font:14px/100% Arial,Helvetica,sans-serif; padding:.5em 2em .55em; text-shadow:0 1px 1px rgba(0,0,0,.3); box-shadow:-1px 2px 3px #ddd; }
.contact-form-button:hover { text-decoration:none; }
.contact-form-button:active { position:relative; top:1px; }
.seocips-button-color { color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.seocips-button-color:hover { background:#f47c20; }
.seocips-button-color:active { color:#fcd3a5; }
.contact-form-name { background:#F3F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtJSwUayq-00J2AvChu2v7d2mI-SiyqHcqs0vuA5C_TKXfCzRvQOlS_FhxomnCeDKt98ftWcC1nDaQJBmo3kdBl_FHnFq5i2n0ZzH9BYa7aU9DT6bl54h3Nyr0ghMgoptzqFaA-XArU2M/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>

Masih dalam mode HTML , langsung aja di publikasikan , jika kamu ke mode compose kemudian di publikasikan hasilnya akan berantakan

 DEMO

Memasang widget di atas tampilanya simpel dan sederhana , tapi cukuplah menurut saya , anda dapat mengujinya dengan mengirimkan pesan mengunakan contact form ini , dan periksa apakah pesanya muncul di email gmail blog kamu.