Cara Terbaru Membuat Halaman Contact Form Keren di Blogger

Cara terbaru membuat halaman kontak formulir di blogspot. (Gambar: Dok AdityaTekno.com)

AdityaTekno.com - Tutorial cara membuat halaman kontak form di Blogspot akan dibahas dalam artikel ini. Perlu Anda ketahui, Formulir Kontak atau Contact Form biasa digunakan pengunjung sebagai sarana untuk berkomunikasi kepada admin atau pemilik blog secara pribadi lewat email.

Secara umum formulir kontak terdiri dari beberapa kolom isian seperti nama, email, dan pesan yang ingin disampaikan. 

Contact Form biasanya memiliki beberapa nama yang cukup populer dikalangan para blogger, ada yang mengatakan 'Contact Us',  'Contact Me', 'Kotak Saran', Kontak Kami hingga 'Hubungi Kami'. Semua nama tersebut intinya sama yaitu sebagai sarana untuk menghubungi admin blog. 

Keberadaan Contact form pada sebuah blog atau situs bisa dijadikan sebagai indikator bahwa blog atau situs tersebut memiliki keseriusan dalam pengelolaan, sehingga dapat meningkatkan kepercayaan pengguna terhadap apa yang ada di dalamnya.

Sebetulnya Blogger (Blogspot) sudah menyediakan fitur/layanan formulir kontak gratis yang bisa dipasang sebagai widget contact form di blogspot. Namun, sepertinya jarang sekali blog yang menggunakan widget formulir kontak bawaan. 

Mereka lebih memilih untuk membuat contact form pada halaman statis, meskipun harus menggunakan layanan contact form dari pihak ketiga.

Cara Membuat Kontak Form di Blogger (Blogspot)

Langkah pertama, buka Dashboard Blogger, kemudian pilih Menu Tata Letak >> Tambahkan Widget >> scroll kebawah lalu pilih Formulir Kontak dan klik simpan.

Catatan: Jika Anda sudah menambahkan widget Kontak Formulir pada blog, Anda bisa langsung lewati langkah pertama ini.

Langkah kedua, silahkan buka Menu Halaman >> klik tombol Halaman baru dan copas kode di bawah ini di tab HTML post (bukan di tab Compose). Edit juga Setelan Halaman pada menu Pilihan >> Baris baru >> Tekan "Enter" untuk baris baru.

<style 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:'Roboto';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/AVvXsEg2RPwJPZCPwpqvvh-8VZzJcMpeneld1f4bzkzavVvJvVcU8Utnjoz63sLFkAQKK8helhlQ80B5TFF8yasuqjAvldqx1ZhBGK4fZTwnnOxHjwt8vBHFCmoR496Hr1dxW4rPfl0b4LyRTaDBdeWJ6eHaPDRJ25ml2Vx0__oc7MXKBL4OuO50CjRVxNuHLg/s1600/mail-me-adityatekno.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>

<form name="contact-form">
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" />
</div>
<div class='formcolumn2'>
<input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" />
</div>
<div class='formcolumn3'>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea>
</div>
<div class='formcolumn4'>
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</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>

Bagi yang mengoptimasi blog nya dengan menyembunyikan CSS dan JS Blogger, tambahkan kode dibawah ini tepat dibawah kode tadi pada langkah sebelumnya.

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '8500593521816026329';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8500593521816026329','//www.adityatekno.com/','8500593521816026329');
_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': '8500593521816026329', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Penting!
Ganti semua kode yang ditandai dengan URL dan ID blog Anda. ID blog bisa didapatkan saat membuka salah satu blog di Blogger dan akan tampil pada tab browser.

Terakhir, jika sudah ditambahkan semua, silahkan di Publish/Publikasikan. 

Sebenarnya dilangkah ini sudah jadi, tapi nanti widget kontak formulirnya akan muncul di sidebar.

Nah, untuk menyembunyikan widget kontak formulir yang muncul di sidebar, silahkan ikuti langkah berikut.

Pertama, klik Menu Tema >> Edit HTML >> tambahkan kode CSS di bawah ini sebelum kode </head>.

<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>

Kemudian klik Simpan.

Demikian panduan cara membuat halaman kontak form di blogger. Semoga tutorial ini bermanfaat. Salam AdityaTekno.com

Baca Juga: Cara Membuat Halaman Partner Blog Seperti AdityaTekno