Sudah sewajarnya sebuah blog memiliki Contact Form. Tapi apa sih gunanya contact form ? Salah satu fungsi contact form yaitu untuk mengubungkan pengunjung dengan pengelola blog. Dengan adanya contact form blog kamu bisa terhubung dengan pengunjung. Jika pengunjung blog kamu mempunyai keperluan untuk menghubungi kamu, mereka tidak akan kebingungan dan bisa menggunakan contact form yang tersedia. Dengan adanya contact form juga blog kamu akan terlihat bisa dipercaya oleh pengunjung, karena jika mereka merasa dirugikan, mereka bisa menghubungi kamu.
Pada artikel kali ini saya akan membagikan bagaimana cara kamu menambahkan contact form untuk para pengguna blogger. Bagi kamu yang menggunakan layanan pembuatan blog selain blogger, cara ini tidak akan bekerja.
Ada dua cara untuk menambahkan contact form pada blog kamu. Pertama dengan widget yang sudah disediakan blogger dan yang kedua menambahkan contact form pada halaman statis blog.
Cara menambahkan Contact Form dengan widget
Pada cara ini, contact form yang kamu buat memiliki tampilan default yang sudah diatur oleh tema yang kamu gunakan. Berikut adalah langkah-langkahnya.
- Login ke Blogger.com
- Buka menu tata letak
- Klik tambahkan gadget
- Pilih Formulir Kontak
- Simpan dan lihat
Sebetulnya tanpa disebutkan juga hal pertama ini sudah pasti dilakukan. Tapi mari menggunakan algoritma yang benar.
Untuk menambahkan contact form dengan widget, kamu harus berada di menu tata letak dan menentukan dimana kamu akan meletakkan contact form tersebut. Apakah di bagian sidebar kanan, sidebar kiri, footer, atau dimana ?
Klik tambahkan gadget pada bagian blog yang kamu pilih. misalkan kamu mau menambahkan contact form di bagian footer, klik tambahkan gadget disana. Nanti akan muncul berbagai pilihan widget yang bisa kamu tambahkan.
Dari berbagai pilihan yang ada, pilih formulir kontak. Dengan ini blog kamu sudah dilengkapi dengan Contact Form.
Pada dasarnya setelah memilih widget, blogger akan otomatis menyimpan pembaruan pada tata letak blog kamu. Tapi untuk jaga-jaga, klik tombol simpan dan lihat tampilan baru blog kamu.
Cara menambahkan Contact Form pada halaman statis
- Login ke Blogger.com
- Buka menu halaman
- Buat halaman baru
- Copy paste Kode berikut:
- Tambahkan style css
- Simpan dan lihat
Jika kamu mau menambahkan contact form pada halaman statis, tentunya kamu harus masuk ke menu halaman dan membuat halaman baru.
Pada halaman baru ini kamu akan menempelkan kode/script yang sudah kamu siapkan. Tapi sebelumnya kamu harus mengatur halaman tersebut pada tampilan html, bukan pada tampilan menulis/compose. Hal ini supaya halaman tersebut bisa menerjemahkan kode yang kamu tempel.
Untuk kamu yang ingin menghilangkan kolom komentar di bagian halaman statis ini, kamu bisa mengaturnya dengan menekan icon gear/pengaturan di pojok kanan atas dan jangan izinkan komentar.
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<div class="name">
Name
<br/>
<input placeholder='your name' class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
</div>
<div class="email">
Email
<span style='font-weight: bolder;'>*</span>
<br/>
<input placeholder='example@gmail.com' class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
</div>
<div class"message">
Message
<span style='font-weight: bolder;'>*</span>
<br/>
<textarea placeholder='type your message here..' class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<div>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<br/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'<>/p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'<>/p>
</div>
</form>
</div>
</div>
<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'] = '6575712345678909876';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\6575712345678909876','//hageuyon.blogspot.com/','6575712345678909876');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '6575712345678909876', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));//]]>
</script>
Pada tulisan berlatar merah, silahkan kamu ubah id tersebut dengan id blog kamu. Kamu bisa mendapatkan kode id tersebut dari url beranda dasbor blogger kamu.
Contoh: https://www.blogger.com/blog/posts/6575712345678909876
Untuk menambahkan style css, kamu download terlebih dahulu salah satu style yang saya sediakan di bawah.
Sekarang kamu sudah menambahkan contact form pada halaman statis blog kamu. Simpan dan silahkan kamu coba gunakan untuk melihat apakah terjadi error atau tidak.
Untuk kamu yang masih kurang puas dengan tampilan default dari tema kamu, atau tema kamu tidak mengatur tampilan contact form dan itu hanya bawaan blogger, kamu juga bisa menambahkan contact form dengan menambahkan widget HTML/JavaScript. Caranya seperti cara pertama, namun pada langkah ke-4 kamu tidak memilih widget formulir kontak, melainkan widget HTML/JavaScript dan paste kode/script di atas pada kolom konten. Paste juga kode style yang sudah saya sediakan
Pemberitahuan pesan terkirim dan pesan gagal tidak akan muncul pada mode demo
Kamu bisa menyesuaikan style yang sudah saya siapkan agar terlihat serasi dengan tampilan blog nya.
Saya rasa untuk cara menambahkan contact form pada blog sudah cukup. Jika ada yang kurang mengerti silahkan tanyakan atau jika artikel ini bermanfaat kamu bisa mendukung saya dengan membagikan link artikel ini di media sosial kamu.
0 Komentar