Cara Membuat Contact Form Pada Blog Dengan Tampilan Yang Menarik

Kali ini saya akan berbagi ilmu mengenai cara membuat contact form pada blog yang berguna untuk memudahkan pengunjung mengajukan kritik maupun saran kepada admin blog. Cara ini sudah saya terapkan pada blog ini, silahkan kalian bisa lihat hasilnya pada halaman Contact.

Contact form adalah sebuah fitur yang wajib diterapkan pada setiap blog agar ada jalinan komunikasi antara pemilik blog atau admin dengan pengunjung. Contact form juga memiliki fungsi lain yaitu sebagai salah satu syarat untuk melengkapi blog ketika akan didaftarkan pada Google Adsense.

Cara Membuat Contact Form Pada Blog

Oke langsung saja saya akan memberikan tahapan-tahapannya dalam membuat contact form yang diterapkan dalam blog.

1. Buat Widget Formulir Kontak Pada Blog

• Caranya masuk ke akun blogger klik Tata Letak > Pada sidebar sebelah kanan klik Tambahkan Gadget > Gadget Lainnya > Formulir Kontak

2. Buat Halaman Statis Baru

• Caranya pada akun blogger kalian klik Halaman > Halaman baru
• Pada format penulisan pilih yang HTML, jangan Compose
• Copy kode dibawah ini pada halaman baru tersebut

<form name="contact-form">
<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-user"></i> Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  
<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:left;background:#fff;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #7986cb 0%, #7986cb 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#7986cb;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
</style>

• Selanjutnya klik Publikasikan untuk mempublikasikan halaman baru tersebut.
• Silahkan cek halaman tersebut, jika berhasil tampilannya akan sama persis dengan blog ini.

Kemana Pesan Dari Contact Form Tersebut Terkirim?

Pengunjung yang mengirimkan pesan entah itu kritik maupun saran melalui contact form tersebut, isi dari pesan akan terkirim ke email kalian yag digunakan untuk membuat blog. Pesan akan terkirim secara otomatis dan singkat tanpa menunggu jeda waktu yang lama.

Sampai dengan tahapan ini kalian telah berhasil membuat contact form untuk blog. Semoga tutorial cara membuat contact form pada blog ini bermanfaat bagi kalian dalam berkarya pada dunia ngeblog.