Membuat Contact Form Dengan Tampilan Keren di Blogger

SatuAja : Contact form pada blogger digunakan pengunjung untuk memberi informasi atau menghubungi pemilik blog yang nantinya akan masuk kedalam email pemilik blog. Mengubah tampilan form kontak dari tampilan default menjadi lebih keren adalah hal perlu dilakukan pemilik blog.

Kali ini saya akan membagikan tutorial mengubah tampilan form kontak blogger menjadi lebih keren. Langsung saja berikut tutorial lengkapnya.

Membuat Contact Form Dengan Tampilan Keren di Blogger

Untuk mengubah tampilan form kontak pada blogger ini kita akan menggunakan kode CSS. Pertama silahkan masuk ke Setelan>Tata Letak. Pastikan pada Sidebar anda sudah menempatkan widget Contact Form. Jika belum silahkan klik Tambahkan Gadget>Formulir Kontak>Save.

Langkah selanjutnya copy kode CSS berikut ini.

/* Contact Form Mod */
#ContactForm1,#ContactForm1 br{display:none}

Kemudian masuk ke menu setelan Tema>Edit HTML. Cari kode ]]></b:skin>. Gunakan Ctrl+F untuk mempermudah pencarian.

Setelah itu paste kode CSS yang sebelumnya sudah di copy tepat dibawah kode <style type='text/css'> lalu Save untuk menerapkan perubahan.

Tahap selanjutnya copy kode HTML dibawah ini.

Untuk menghubungi kami silahkan langsung melalui contact form dibawah ini.<br />
<br />
<form name="contact-form"><div class="formcolumn1"><input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
</div><div class="formcolumn2"><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
</div><div class="formcolumn3"><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"></textarea><br />
</div><div class="formcolumn4"><input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /><br />
</div><div style="max-width: 100%; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><br />
<style scoped="" type="text/css">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Poppins';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbDIVA-91s55jl1JiVTZsUiM962MIvFOXCZOF2thcZ-IwCuvc4loKqkeH31LLhMiSXExXxte8do16_0TJgWmLYL5Qrtm2uJq7kgkbvLyqyFWoqC24xzhRZJxWIAe8ke_4iMUm5TCHz_7F_/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style><br />
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><br />
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'NOMOR-ID-BLOGGER';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dNOMOR-ID-BLOGGER','//satuaja-safelink.blogspot.com/','NOMOR-ID-BLOGGER');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'NOMOR-ID-BLOGGER', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Ubah bagian NOMOR-ID-BLOGGER yang terblok warna kuning dengan Blog ID dari blog anda. Untuk mendapatkan nomor Blog ID silahkan lihat pada kolom URL dari dashboard blogger.

Tahap selanjutnya adalah membuat halaman kontak. Caranya pada dashboard blogger klik menu Halaman>+Halaman Baru. Beri nama misalnya "Contact". Pilih metode penulisan HTML lalu Paste kode HTML yang sebelumnya sudah di copy. Klik Publikasikan halaman kontak yang baru anda buat. jika halaman kontak sudah ada tinggal edit saja tanpa harus membuat halaman baru.

Selesai dan untuk mencobanya kalian bisa buka halaman kontak yang baru anda buat, isi semua form lalu klik Send. Dan cek inbox email anda yang terhubung ke blog tersebut maka akan ditemui sebuah email yang dikirim melalui form kontak blog anda.