Cara bikin Contact us sederhana di blog

Ads Responsive

Salah satu syarat penting di blog biasanya adalah  "Hubungi kami atau Contact us" yang di gunakan para pembaca untuk menyampaikan pesan mereka kepada kita dan kali ini saya mau share cara bikin widget sederhana ini dengan cara yang mudah.

caranya buka halaman klik  1.Tata letak >  2.Tambahkan Gadget > 3.Gadget > 4.Formulir Kontak

kalau sudah kemudian cari kode seperti ini

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

hapus sebagian kata dan sisakan beberapa seperti di atas( dan jangan lupa kata "Hapus Ini" Juga di hapus ya)
jangan lupa di simpan templatenya

selanjutnya bikin postingan baru kemudian klik HTML ya . Bukan compose. kemudian pastekan kode di bawah ini :

<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/AVvXsEhF781xvBOKU900sdBpLsD2LsRtRBBKc2m1or91w2BvljS98q-e66Pf-0lrwu0KltSZ8fWLmbxU00ABHMN4bI_evRMJYVAemBhFVB71OJ7d8ZBOBmZOrz80-F5Hca-NwyBbBreyzJ8x_9o/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/AVvXsEhuGY0cGc9zDWREdvaNHJwKzbL_oCHE_gtjcouGloMwBaCCqwMSORcO1_EbzR4YlvIS_ioG0f5D23U7gpROBZ7CCkiatA1uL4kGxjjpvYAJdkqbuBAGhmcL_fUyRXJvxSnKwhdHEPzz_Ds/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/AVvXsEhF781xvBOKU900sdBpLsD2LsRtRBBKc2m1or91w2BvljS98q-e66Pf-0lrwu0KltSZ8fWLmbxU00ABHMN4bI_evRMJYVAemBhFVB71OJ7d8ZBOBmZOrz80-F5Hca-NwyBbBreyzJ8x_9o/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>

Kemudian sebelum di posting klik dulu compose supaya pas di post nggak berantakkan,nah hasilnya seperti ini

selamat mencoba dan jangan lupa tinggalkan komentar .

Ads Responsive