Cara membuat membuat form kontak (Contact Us) simpel di blog – Ketika mengunjungi sebuah blog pernahkah kalian kebingungan dalam mengakses web tersebut? Dan kalian sangat memerlukan informasi tersebut. Salah satu cara nya adalah dengan menghubungi pemilik blog tersebut. Salah satu cara untuk menghubungi pemilik blog tersebut adalah melalui formulir kontak yang tersedia dalam blog tersebut.
Formulir kontak sangat penting bagi sebuah website karena dengan adanya formulir kontak, pengunjung blog kita dapat menghubungi kita apabila kebingungan, mau memberikan kritik dan saran, mengajukan pertanyaan, dan lain-lain. Perlu kalian ketahui formulir kontak juga salah satu faktor SEO. Setelah pada artikel saya sebelumnya saya membahas salah satu faktor SEO tentang cara membuat daftar isi otomatis pada sebuah blog, kali ini saya akan melanjutkan membahas tentang cara membuat formulir kontak di sebuah blog.
Cara membuat formulir kontak di sebuah blog
Sebenarnya cara membuat formulir kontak relatif mudah. Tanpa basa basi lagi, simak cara membuat formulir kontak sebagai berikut :
1. Pertama, kalian buka akun blogger anda. Setelah berhasil terbuka silahkan masuk ke menu tata lelak. Kemudian klik tambahkan gadget. Lalu akan muncul beberapa gadget yang tersedia. Kemudian kalian pilih gadget Formulir Kontak kemudian klik simpan. Silahkan lewati langkah ini apabila blog anda sudah terpasang formulir kontak.
 |
| Formulir kontak |
2. Setelah berhasil menambahkan gadget formulir kontak, langkah selanjutnya adalah masuk ke menu Tema atau template kemudian klik edit HTML untuk mengedit tema anda. Kemudian cari kode </head>. Dan copy paste kode dibawah TEPAT DIATAS kode </head>
<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>
3. Setelah kode sudah anda tambahkan, kemudian klik simpan tema. Langkah selanjutnya adalah masuk ke menu Halaman, kemudian klik Halaman Baru. Setelah itu akan ada tampilan untuk membuat halaman baru. Disana akan ada 2 pilihan, edit melalui compose dan edit melalui HTML. Silahkan klik yang melalui HTML.
Tambahkan kode ini di menu HTML
 |
| Paste kode dimenu HTML |
<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>
<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://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/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'] = '364783265831601173';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3D364783265831601173,'//www.bloggerkoplo.com/','364783265831601173');
_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': '364783265831601173', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
Silahkan ganti kode 364783265831601173 dengan ID BLOG anda. ID blog anda bisa anda dapatkan di alamat blooger anda. Silahkan lihat gambar. Kemudian ganti www.bloggerkoplo.com dengan alamat web anda.
 |
| Cara mengetahui ID Blogger |
Setelah itu disebelah kanan ada menu pilihan. Silahkan setting menu pilihan menjadi seperti ini.
Komentar pembaca = Jangan izinkan
Mode tulis = Tunjukan HTML apa adanya
Baris baru = Tekan “Enter untuk baris baru
 |
| Setelan Halaman |
Setelah semuanya sudah disetting. Silahkan klik publikasikan. Kemudian lihat hasilnya di blog anda. Dan silahkan dicek apakah form kontak berfungsi. Jika tidak berfungsi silahkan coba hapus kode yang ini dalam html nya tadi.
<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'] = '7342017194742683056';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d7342017194742683056','//www.arlinadzgn.com/','7342017194742683056');
_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': '7342017194742683056', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
Setelah kode dihapus, silahkan klik perbarui. Kemudian cek kembali diblog anda. Jika kalian mengikuti langkah lengkah yang sudah saya berikan dengan benar dan teliti, seharusnya form kontak dapat berfungsi dengan baik. Hati hati ketika mengganti ID blog dan alamat web anda.
Yak, kira-kira seperti itulah cara untuk membuat formulir kontak (contact form) di blog. Dengan adanya formulir kontak, pengunjung dapat lebih mudah untuk menghubungi anda. Peluang tersebut sangatlah menguntungkan karena anda menjadi bisa berkomunikasi dengan pengunjung. Sehingga peluang kerja sama menjadi lebih besar.
Jika anda tertarik dengan tutorial blogger lainnya, jangan lupa untuk membaca artikel saya yang berjudul hal yang harus dilakukan agar artikel cepat terindex google. Semoga artikel saya kali ini bermanfaat bagi anda. Terimakasih telah berkunjung di www.bloggerkoplo.com. Salam koplo.