Hallo Publisher,
Tahukah Anda, ada kalanya seorang pengunjung ingin menyampaikan sesuatu yang tidak ada kaitannya dengan topik postingan, atau ada kalanya yang ingin dia sampaikan bersifat privasi, jadi dengan menambahkan form contact pada blog memungkinkan pengunjung mendapatkan kesempatan untuk berkomunikasi sesuai kebutuhan mereka, jadi selain comment box, contact form juga penting dan mutlak harus ada.
Di sini saya akan coba menunjukan bagaimana cara membuat formulir Contact untuk platform blogger. Cara pertama dengan widget, Cara kedua dengan Google Drive.
Cara 1 - Modifiksi Widget Contact Blogger
Pertama
Masuk ke halaman Layout / Tata Letak Blogger, Klik Add a Gadget / Tambahkan Gadget di sidebar atau footer. Pilih Gadget Lainnya, lalu tambahkan Formulir Kontak.
Menambahkan Widget Contact Blogger
Kedua
Menuju ke Template, lalu klik Edit HTML. Setelah itu klik kursor ke halaman kode template, berikutnya gunakan CTRL+F untuk mencari elemen berikut, Anda harus menemukannya!
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
Klik panah kecil di samping kiri baris elemen untuk membuka struktur di dalamnya. Di bawahnya persis Anda akan melihat kode berikut:
<b:includable id='main'>
Ketiga
Anda akan ditunjukan dengan kode berikut, maka silakan HAPUS semua kode yang telah saya tandai dengan komen MULAI DARI INI - SAMPAI SINI.
<b:includable id='main'>
<!-- MULAI DARI SINI -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
<!--SAMPAI SINI-->
</b:includable>
Hingga menyisakan elemen berikut:
<b:includable id='main'></b:includable>
Keempat
Lakukan pencarian baru elemen style dengan manfaatkan CTRL+F, cari kode berikut:
]]></b:skin>
Setelah ketemu, Copy-Paste kode CSS di bawah ini tepat diatasnya (tepat sebelum sintak penutup diatas):
/*CUSTOM CONTACT FORM BY GATEWAN.COM */
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 600px;
max-width: 100%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 100%;
height:100px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;
}
Jangan lupa klik SIMPAN TEMPLATE!
Kelima (Terakhir)
Lanjut ke menu Laman, buat Laman baru, beri nama Contact / Contact Us / Contact Me / Buku Tamu atau terserah, bebas, yang penting relevan. Yang sebelumnya masih mode Compose, maka silakanan ganti ke mode HTML terlebih dahulu. Berikutnya Copy - Paste Kode di bawah ini:
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="fm_name">
Your Name:
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="fm_email">
E-mail Address *:
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear:both">
</div>
<div class="fm_message">
Message *:
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>
Jangan lupa klik Simpan / Publish. Berikut hasilnya,
Cara 2 - Memanfaatkan Google Drive - Formulir
Disni saya akan tunjukan bagaimana cara paling mudah membuat form contact anti spam, tanpa coding dan semua dilakukan dengan metode grafis (GUI) dengan menggunakan fasilitas yang terdapat pada Google Drive dan rasakan kemudahannya, semudah Anda menyematkan video atau image kedalam postingan blog.
Tutorial ini saya kolaborasikan antara text dengan video, agar lebih gambang dalam memahami prosesnya, text learner atau visual learner itu selera agan:
Saya asumsikan kalian semua sudah mempunyai akun google (google mail). Login ke google drive dan Buat formulir baru:
Google Formulir
- Jangan lupa isi Judul formulir dan deskripsinya
- Buat field seperti yang telah ditentukan atau yang kalian perlukan
- Pilih tema formulir sesuai selera
- Cek hasilnya dengan cara pilih preview / lihat bentuk jadi, sebelum disematkan pada blog
- Kirim formulir untuk mendapatkan code framenya, dan sesuaikan ukurannya
- Copy codenya dan sematkan pada new laman, jangan new post
- Lihat hasilnya, dan lakukan test, isi formulir dan kirimkan pesan,
- Kembali ke halaman google drive, pilih menu Lihat tanggapan pada formulir tadi
- Disitu kalian bisa melihat/mereview/meninjau pesan-pesan dari tamu tanpa harus khawatir mail box anda penuh dengan spam, junk dll. Sebab pesan dari tamu ditampilkan dalam format spreadsheets,
Tampilan Google Formulir
Jika belum jelas, kalian bisa lihat video ini;
https://youtu.be/sbcpUcZW3XQ
Hasilnya,
