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

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.

Pasang Blogger Contact Form di Halaman Statis dan Kostumisasi Dasarnya
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 36 Comment(s):

Kim Eko said...

Mantaf pak..keren lagi blognya. sekarang saya banyak belajar.;)

Beben Koben said...

rajin mosting euy...xixixixi

Friska Lee said...

mantap dan patut untuk dicoba nih :D

Hayardin Putra said...

Selamat Pagi Pak... saya juga sampai detik ini masih menggunakan Form Contact dari layanan contact form gratis yang tersedia di jagat web, Insya Allah ke depannya saya akan menggunakan Tips dari Bapak..

Agung Talaga said...

Saya juga sebelum2nya masih menggunakan layanan lain untuk halaman kontak blog saya tapi semenjak saya dapat informasi dari blognya Kang Ismet, barulah saya mulai menggunakan bawaan blogger ini.

Ahmad Manarul H said...

Jadi tambah keren nih mas :D

Dwi Yulianto said...

saya malah jarang menggunakan contact form :-D
mungkin kedepannya bisa saya coba :-)
terima kasih atas berbagi ilmunya pak :-)

Ahmad Khoirul Azmi said...

@all: Thanks for your comments and selamat mencoba :)

yOu WahYou said...

Kalau saya memakai form contact dari google doc mas... kapan-kapan saya akan coba pake yang ini..

Andi Makkarumpa said...

Sy suka dgn gaya bahasanya dlm menjelaskan tata caranya. Btw, makasih atas sajian informasinya & sy mrasa sangat terbantu dlm memahami hal tsb. Wassalam stad...

Aji Wibowo S.Farm.,Apt.,M.P.H said...

agak rumit nih tapi akan dicoba, sekarang saya pakai 3rd party widget

Apif Fuloh said...

Pembuatan kontak form untuk blogger ini sangat membantu sekali. Saya setuju daripada harus memasang kontak form dari layanan situs lain dan harus menyertakan link aktif dari situs mereka di kontak form tersebut.

Irman Sule said...

Mantap...makasih informasi nya sangat berguna
Salam kenal..

Creamsari widji said...

Makasih mas, sudah saya coba dan.....Berhasilll,,,,

Aran Setiadi said...

wah makasih banyak mas... ini sangat membantu, saya sudah pasang di blog saya. terus saya tes dan alhamdulillah jadi. sip ams

Fahri Ramdani said...

Mantab info'a... Dpt ilmu baru lagi nih

yunilda mahabir said...

makasih mas ini sangat membantu..

King Kazuma said...

tuh kontak formnya terkirim di mana?

Ahmad Khoirul Azmi said...

ke akun gmail tempat u daftar akun Blogger

faizul alta said...

mas... kontak from nya malah tidak terlihat kox diblog saya? coba mas cek sebentar mas ke blog saya qualityispriority.blogspot.com

Ahmad Khoirul Azmi said...

tidak terlihat gimana? saya cek oke dan fungsional.

Choirie Husain said...

makasih mas berhasil .sukses selalu

Muhayan Al-idris said...

thanks infonya...

Tresna Amanah said...

thanks,berhasil saya bikin

Aa Judin said...

mksh bang, atas ilmunya, sangat manfaat...

bambang irwanto said...

Makasih untuk tutorialnya,moga sukses selalu...

i gede hendra tirtana, ST. said...

Thanks gan, cuman isi kontak formnya kok kagak nyampe ke email ya...
tengkiyu

Ahmad Khoirul Azmi said...

Harusnya nyampe, dicoba lagi. Mungkin kejaring di spambox

Govinda Yasonta said...

Thanks Gan Tipsnya, ...
Terus Pada Menu Tata Letak Widget Kontak Formnya Ga Perlu Dihapus Gan ???
Atau Boleh Dihapus Widgetnya ???

Ahmad Khoirul Azmi said...

Jangan hapus widgetnya, kalo dihapus script contact form nya juga akan ilang

Ewing Mahendra said...

Sebelumnya saya minta maaf banget, saya seorang newbie blogger dan saya punya pertanyaan yg bodoh tapi saya pingin tau.. kalo bersedia tolong dan please di jawab..
contact form itu fungsinya apa aja dan buat apa?

Ahmad Khoirul Azmi said...

agar orang lain/pengunjung yang memiliki kepentingan dengan anda dapat menghubungi anda tanpa harus mengetahui alamat email anda terlebih dahulu. Fungsinya juga sebagai privasi, sehingga anda tidak perlu mengekspos alamt email anda ke khalayak banyak. Anda akan mendapatkan pesan via email, dan balas ke email yang mengontak anda.

Dadung Sulaeman said...

Trm ksh nice infonya mas! Saya mau nyoba juga nih...

rohmanh hakim said...

mas mohon maaf, saya mau bertanya, sewaktu saya buat contact form persis seperti tutorial diatas, kenapa tombol kirim ketika di klik kok gak berfungsi ya mas, apa yang salah?

Ahmad Khoirul Azmi said...

Pastikan tahap ini sudah benar:
"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"."

SL Blogger said...

sangat membantu sekali mas. terimaksih atas informasiya. Semoga lebih memberikan kemanfaatan, aamiin

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap