Sudah cukup lama sejak Blogger resmi merilis Contact Form
untuk pengguna platform Blogger. Fitur ini berupa widget/gadget. Sayangnya,
widget ini jarang nongol di blog-blog pengguna Blogger. Sebagian besar masih
mengandalkan layanan contact form gratis yang tersedia di jagat web. Mungkin
karena fitur-fiturnya lebih canggih, dan, yang pasti, banyak yang tidak ingin
menyediakan contact form dalam bentuk widget; tampak kurang elegan dan khusus.
Nah dalam kesempatan ini, saya ingin memberikan sedikit trik
agar widget Contact Form Blogger yang secara default ada di bagian widget
sidebar atau footerbar bisa dipindah dan dijadikan konten halaman statis
(static page). Saya akan memberikan basicnya terlebih dahulu. Ke depan saya
akan memberikan beberapa hack untuk mendesain tampilan contact form tersebut
lebih jauh lagi.
Karena ini saya maksudkan sebagai tutorial non-instan, maka
akan saya beberkan beberapa poin penting dari elemen contact form Blogger
hingga bagaimana melakukan kostumisasi dasar dan meletakkannya di halaman
statis blog.
The Basic of Blogger Contact Form
Melalui fitur "view source" atau "page
source" pada browser, kita dapat melihat bagaimana susunan HTML pada
widget contact form Blogger. Susunan HTML-nya cukup sederhana, berupa beberapa
elemen input di dalam form dan dinaungi oleh div, berbeda dengan contact form
pada umumnya yang dinaungi oleh elemen-elemen tabel.
Begitulah elemen dasarnya. Proses generating input di dalam
contact form Blogger hingga sampai pada email tidak bisa diketahui secara pasti
karena semua langsung terjadi di server Blogger. Seperti pada umumnya, karena
bukan open source, kita tidak bisa tahu persis bagaimana engine Blogger
bekerja. Yang jelas, pesan akan diteruskan ke email sesuai akun blog. Satu yang
pasti, anda harus register (mengaktifkan/menggunakan) widget contact form
terlebih dahulu meski nantinya akan melakukan hack dan menampilkannya di
halaman statis, bukan di widget. Tanpa register, contact form tidak akan aktif.
Proses yang akan dilakukan adalah:
A. Memasang Widget Contact Form
B. Menghapus Elemen Contact Form Di Widget Sidebar
C. Kostumisasi Sederhana Pada Contact Form
D. Memasang Contact Form di Halaman Statis
Cara Memasang Widget Contact Form
1. Masuk ke dashboard > layout > add a gadget
2. Pilih Widget/Gadget Contact Form dan save/simpan.
3. Done.
Menghapus Elemen Contact Form di Widget Sidebar
Setelah anda memasang Contact Form, maka widget akan ditampilkan
pada sidebar atau pada footer bar sesuai pilihan dan template anda. Kita harus
menghapusnya agar nantinya Contact Form hanya bisa diakses melalui halaman
Kontak saja. Mengapa dihapus? Mengapa tidak disembunyikan saja? Beberapa
tutorial yang berkaitan dengan hack blogger seringkali saya temui menggunakan
metode menyembunyikan widget (dengan conditional tag). Cara ini menurut saya
kurang efektif, karena widget contact form tidak akan ditampilkan di halaman
mana saja, sehingga cara terbaik adalah dengan menghapus elemennya, bukan
menyembunyikan/mengecualikan saja. Ingat yang dihapus hanya elemennya, bukan
keseluruhan widget, karena kita tetap ingin mempertahankan register contact
form aktif.
1. Buka dashboard > Template > Edit HTML.
2. Kemudian cari bagian kode widget contact form yang sudah
dipasang sebelumnya dengan menggunakan fitur "Jump to Widget".
Perhatikan gambar berikut:
3. Klik "ContactForm1" untuk menuju ke bagian
widget tersebut, kemudian klik tanda panah di sebelah kiri kode widget (expand)
untuk membuka isi widget tersebut, sebagaimana ditampilkan pada gambar berikut:
4. Widget akan terbentang, dan sekali lagi klik tanda panah
di sebelah kiri bagian antara <b:includable id='main'> dan
</b:includable>. Sekali lagi widget akan terbentang lebih rinci, hapus
bagian di dalam/di antara kedua tag b:includable tersebut. Perhatikan gambar
berikut:
5. Perhatikan kode yang dihapus dengan benar, setelah
dipastikan, save template.
Kostumisasi Sederhana Pada Contact Form
Susunan html contact form bawaan blogger secara default
sangat sederhana, lihat di sini. Tanpa kostumisasi, kode itu pun sudah siap
digunakan. Untuk melakukan beberapa kostumisasi tambahan, saya memberikan
beberapa ide sederhana dan masih sangat mendasar, untuk hack CSS dalam beberapa
desain menarik dan personal, akan saya ulasan pada kesempatan-kesempatan
berikutnya.
Kostumisasi pertama yang saya lakukan adalah mengubah
informasi perintah seperti "Name", "Email" yang secara
default berada di atas kotak input menjadi di dalam kotak dan akan terhapus
secara otomatis saat di klik. Untuk memungkinkan ini, saya mengisi value sesuai
dengan teks yang ingin ditampilkan dan menggunakan javascript sederhana onblur
dan onfocus. Ex:
<input class='contact-form-name'
id='ContactForm1_contact-form-name' name='name' size='30' type='text'
value='Nama*' onblur='if (this.value == "") {this.value =
"Nama*";}' onfocus='if (this.value ==
"Nama*") {this.value = "";}'/>
Kostumisasi kedua adalah menambahkan elemen input button
sebagai perintah reset/clear yang berfungsi menghapus seluruh isi input pada
form kontak. Yaitu:
<input class='contact-form-button
contact-form-button-submit' type='reset' value='Reset'/>
Ketiga, saya menambahkan styling CSS dalam tag tersendiri
terutama untuk mengubah lebar form agar bisa disesuaikan dengan lebar halaman
post, sebab secara default contact form blogger sangat sempit.
Keempat, mengubah elemen yang menaungin informasi bahwa
pesan berhasil dikirim dari tag paragraf (p) menjadi division (div) Sebab jika
ditampilkan dalam tag paragraf, background berwarna oranye akan tampil di
bagian tersebut meski informasi tidak dimunculkan.
Dan berikut hasil totalnya:
<div class='form'>
<form name='contact-form'>
<p></p>
<input class='contact-form-name'
id='ContactForm1_contact-form-name' name='name' size='30' type='text'
value='Nama*' onblur='if (this.value == "") {this.value =
"Nama*";}' onfocus='if (this.value ==
"Nama*") {this.value = "";}'/>
<p></p>
<input class='contact-form-email'
id='ContactForm1_contact-form-email' name='email' size='50' type='text'
value='Email Valid*' onblur='if (this.value == "")
{this.value = "Email Valid*";}' onfocus='if (this.value ==
"Email Valid*") {this.value = "";}'/>
<p></p>
Isi Pesan*
<br/>
<textarea class='contact-form-email-message' cols='25'
id='ContactForm1_contact-form-email-message' rows='10'></textarea>
<p></p>
<input class='contact-form-button
contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button'
value='Kirim'/>
<input class='contact-form-button
contact-form-button-submit' type='reset' value='Reset'/>
<p></p>
<div style='text-align: center; max-width: 250px; width:
100%'>
<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>
<p><b>*</b><i>wajib
diisi</i></p>
</div>
<style>
.contact-form-name, .contact-form-email {max-width: 250px;
width: 100%;}
.contact-form-email-message {max-width: 450px; width: 100%;}
</style>
demo blogger contact form
1. Copy seluruh kode di atas dan pindahkan ke dalam text
editor sederhana, misalnya notepad.
2. Lakukan kostumisasi di awal (atau di belakang juga boleh,
hehe) untuk menyesuaikan beberapa elemen agar sesuai dengan halaman statis anda
nantinya.
Berikut beberapa poinnya:
Teks yang berwarna merah adalah informasi input yang nanti
muncul pada input form dan button, ubah sesuai keinginan.
Ubah nilai di dalam rows='10' untuk menambah/mengurangi
tinggi kolom pesan.
Ubah nilai di dalam max-width: 250px (dua bagian) untuk
menyesuaikan lebar "informasi pengiriman pesan" dan lebar form
"nama" dan "email".
Ubah nilai di dalam max-width: 450px untuk menyesuaikan
lebar form pesan.
3. Pastikan kostumisasi sudah betul dan simpan dengan baik.
Memasang Contact Form di Halaman Statis
1. Buat halaman statis, dashboard > pages > new page
> blank page.
2. Setelah masuk ke halaman post editor, isi judul halaman
sesuai keinginan, misalnya "Contact Me", "Contact Us",
"Kontak Kami", dll. Lalu pilih mode "HTML" dan masukkan
kode yang sudah dikostumisasi ke dalam editor.
Catatan penting:
Setelah memasukkan kode hingga proses menerbitkan/publish
halaman, jangan sekalipun mengembalikan editor ke mode "Compose",
sebab mode compose secara otomatis akan parse beberapa jenis kode dan merusak
susunannya. Jika ingin preview, gunakan fitur "Preview/Pratinjau".
3. Setelah proses edit dan kostumisasi contact form beres,
"Publish" halaman tersebut.
4. Done!
--------------
Memang, sebagaimana banyak yang bilang, Blogger Contact Form
memiliki beberapa kelemahan, diantaranya adalah ketiadaan fitur captcha, field
yang sedikit, tidak dapat upload file, dan tidak bisa dikostumisasi dari sisi
server (ga ada akses, coy). Tapi menurut saya ini tetap bagus, yah lumayan lah,
daripada harus menggunakan layanan contact form pihak ketiga yang memiliki
batas. Dan menurut hemat saya, Blogger (dan Google tentunya) sudah memiliki
cara tersendiri untuk menangani spam.
Tidak ada komentar:
Posting Komentar