Pasang Blogger Contact Form di Halaman Statis dan Kostumisasi Dasarnya

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 == &quot;&quot;) {this.value = &quot;Nama*&quot;;}' onfocus='if (this.value == &quot;Nama*&quot;) {this.value = &quot;&quot;;}'/>

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 == &quot;&quot;) {this.value = &quot;Nama*&quot;;}' onfocus='if (this.value == &quot;Nama*&quot;) {this.value = &quot;&quot;;}'/>

<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 == &quot;&quot;) {this.value = &quot;Email Valid*&quot;;}' onfocus='if (this.value == &quot;Email Valid*&quot;) {this.value = &quot;&quot;;}'/>

<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>

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. 

Untuk kostumisasi yang lebih advanced, saya sedang merancang beberapa jenis tampilan contact form dengan hack CSS yang nantinya akan saya terbitkan pada kesempatan-kesempatan mendatang.

© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.

Tweet