CARA MEMBUAT CONTACT FORM DI BLOG

Kali ini saya akan membagikan tentang cara membuat Contact Form atau Contact US di blog.

Membuat contact form di blog sangat mudah, tidak perlu mendaftar melalui websait penyedia untuk membuat contact form.

Kita akan menggunakan Widget bawaan yang sudah di sediakan oleh pihak blogger

Memasang contact form di blog merupakan salah satu hal yang penting dan berfungsi sebagai media korespondensi formal dan personal

Baca Juga : MEMBUAT SITEMAP / DAFTAR ISI OTOMATIS DI BLOG

Membuat Contact Form

Membuat Contact Form atau Contact US sangatlah penting untuk blog ataupun si pembaca karena jika pembaca ingin penyampaikan hal yang tidak ingin di ketahui banyak orang atau mempunyai saran dan kritikan bisa menghubungi melalui Contact Form atau Contact US.
Biasanya widget Contact Form atau Contact US bawaan blogger hanya bisa di gunakan untuk widget blog saja tapi dengan tutorial yang akan saya berikan kali ini kita akan membuat Contact Form di halaman blog.

Memasang Widget Contact Form Di Blog

Pertama tama kita harus memasang terlebih dahulu widget Contact Form di Blog.
Caranya silahkan anda klik tata letak>>Add Widget>>Contact Form

Lalu silahkan anda cari kode seperti pada di bawah ini kira kira dan hapus hingga menjadi seperti di bawah.
Awalnya kode tersebut panjang hingga akhirnya menjadi seperti di bawah ini

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>

Hapus bagian ini

</b:includable>
</b:widget>
</b:section>

Simpan template

Memang harus memasang dulu widget Contact Form lalu menghapusnya sebagian agar Widget Contact Formnya aktif

Baca Juga : CARA MENGHUBUNGKAN BLOG DENGAN MEDIA SOCIAL

Membuat Halaman Contact Form

Langkah selanjutnya silahkan anda buat laman baru dan gunakan mode penulisan dalam mode HTML

Selanjutnya silahkan anda copy kan kode di bawah ini di laman yang akan di buat

<style scoped="scoped" type="text/css">
.contact-form-box{width:50%;margin:20px auto;padding:0}
#ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:100%;height:auto;margin:5px auto 15px;padding:10px 10px 10px 30px;color:#777;position:relative;z-index:1;background:#ebebeb;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;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.contact-form-names,.contact-form-emails{position:relative!important}
.contact-form-names:before{content:'\f007';font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;color:#777;font-size:16px;padding-right:.5em;position:absolute;top:-2px;left:10px;z-index:2}
.contact-form-emails:before{content:'\f0e0';font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;color:#777;font-size:16px;padding-right:.5em;position:absolute;top:-2px;left:10px;z-index:2}
#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fffff7;outline:0}
#ContactForm1_contact-form-email-message{width:100%;height:100px;margin:5px auto;padding:10px 10px 10px 30px;background:#ebebeb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM9jenwVWMvjX6JNjy9l6ErvC1R253lqHsW-Z79Au5Tu5ef3hd6k-NVnDHVANweuZ75scoPeBOqF1X2D3ruWhoKAqxSKrUUa8V5v72zrJMITLnD-aOZsREWDJMbz1pcnPBehFB6JfCqJ2j/s1600/pencil.png) no-repeat 10px 10px;color:#777;font-family:Arial,sans-serif;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;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
#ContactForm1_contact-form-email-message:focus{background:#fffff7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM9jenwVWMvjX6JNjy9l6ErvC1R253lqHsW-Z79Au5Tu5ef3hd6k-NVnDHVANweuZ75scoPeBOqF1X2D3ruWhoKAqxSKrUUa8V5v72zrJMITLnD-aOZsREWDJMbz1pcnPBehFB6JfCqJ2j/s1600/pencil.png) no-repeat 10px 10px;outline:0}
#ContactForm1_contact-form-submit{display:block;height:30px;float:left;color:#FFF;padding:0 20px;margin:10px 0 5px;cursor:pointer;background-color:#56585d;box-shadow:0 4px 0 0 #2d2f34;border:1px solid #434446;border-radius:4px;text-shadow:0 1px 0 #37383b;}
#ContactForm1_contact-form-submit:hover{background-color:#4d4f53}
#ContactForm1_contact-form-submit:active{position:relative;top:2px;box-shadow:0 2px 0 0 #2d2f34}
#ContactForm1_contact-form-submit:focus{outline:0}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:15px;}
.contact-form-button-submit{background-image:none!important;border-color:none!important}
@media screen and (max-width:768px){.contact-form-box{width:100%}
}
</style>

<br />
<div class="contact-form-box">
<div style="text-align: justify;">
<div style="text-align: center;">
Silahkan isi form di bawah ini jika anda mempunyai saran, kritikan, ataupun masukan pada kami mengenai artikel yang kami sajikan pada blog ini</div>
</div>
<br />
<form name="contact-form">
<span class="contact-form-names">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /></span>
<span class="contact-form-emails">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br />
<br />
<div class="clear">
</div>
<div style="max-width: 100%; text-align: left; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

Tetap pada mode HTML langsung saja publikasikan dan anda bisa melihat hasilnya seperti pada demo

DEMO

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: