Cara Membuat Laman Kontak Bawaan Pada Blogger

Agar admin blog mudah di hubungi maka kita harus memiliki Contact Form. Dengan Contact Form tersebut akan memudahkan pengunjung saat mereka mencoba menghubungi blog kamu.

Contact Form pada blogger bukan menjadi hal yang dipelukan, tapi sudah menjadi hal yang wajar dan memang sangat dibutuhkan.

Untuk membuat Contact Form memanglah sangat mudah, kita hanya menggunakan beberapa layanan yang sudah tersedia.

Namun disini kita akan mencoba membuat laman kontak sendiri seperti bawaan pada blogger. Tentu itu akan menjadi hal yang sederhana dan cepat.

Untuk membuat laman kontak bawaan pada blogger, silahkan ikuti langkah-langkahnya dibawah ini.

1. Masuk ke dashboard blog kamu.

2. Pilih Halaman.

3. Buat halaman baru.

4. Salin dan paste kode dibawah ini ke halaman yang akan kamu buat.

<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>
<form name="contact-form">
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" name="name" placeholder='Nama' 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='Pesan' rows="7"></textarea>
</div>
<div class='formcolumn4'>
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
</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>
<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:'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/AVvXsEigiXPC1_vn4CZxljD0koVchxDKy9xiC3SlJqejEeh8XbHU1mCSA3RLWBCupgj_lslyJ6PVPN5AXocv4UmW0AFyXG7cdar7-68-Nkx1fAFgRVsRgdcdqU3QYWyb7HzyA3HXPYL5yLyZTPUB/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>
<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'] = '4503790436212648199';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x4503790436212648199','//www.ngotakdikit.com/','4503790436212648199');
_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': '4503790436212648199', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

5. Kamu harus mempastenya dalam mode HTML, jangan mode Compose.

CATATAN:
Ganti URL Blog dan ID Blog yang saya beri garis bawah dengan milik kamu sendiri.

Sekarang kamu telah memiliki Contact Form seperti bawaan pada blogger.

Dengan tampilan Contact Form tersebut akan lebih enak dan mudah untuk digunakan.

Demikian cara membuat laman kontak bawaan pada blogger. Kalau kamu menyukai artikel ini jangan lupa untuk di share ya.