Pasang Blogger Contact Form Di Halaman Statis Dan Kostumisasi Dasarnya

Sudah cukup usang 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 lantaran fitur-fiturnya lebih canggih, dan, yang pasti, banyak yang tak ingin menawarkan contact form dalam bentuk widget; terlihat kurang berkelas dan khusus.

Nah dalam potensi ini, saya ingin memperlihatkan sedikit trik biar widget Contact Form Blogger yang secara default ada di belahan widget sidebar atau footerbar sanggup dipindah dan dijadikan konten halaman statis (static page). Saya akan memperlihatkan basicnya apalagi dahulu. Ke depan saya akan memperlihatkan beberapa hack untuk merancang performa contact form tersebut lebih jauh lagi.

Karena ini saya maksudkan selaku bimbingan 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 sanggup menyaksikan bagaimana susunan HTML pada widget contact form Blogger. Susunan HTML-nya cukup sederhana, berupa beberapa elemen input di dalam form dan dinaungi oleh div, berlainan dengan contact form kebanyakan yang dinaungi oleh elemen-elemen tabel.

Begitulah elemen dasarnya. Proses generating input di dalam contact form Blogger hingga hingga pada email tidak sanggup dipahami secara niscaya lantaran semua pribadi terjadi di server Blogger. Seperti pada umumnya, lantaran bukan open source, kita tidak sanggup tahu persis bagaimana engine Blogger bekerja. Yang jelas, pesan akan diteruskan ke email sesuai akun blog. Satu yang pasti, anda mesti register (mengaktifkan/menggunakan) widget contact form apalagi dulu meski nantinya akan melakukan hack dan menampilkannya di halaman statis, bukan di widget. Tanpa register, contact form tidak akan aktif.

Proses yang hendak ditangani 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 kafetaria sesuai opsi dan template anda. Kita mesti menghapusnya biar nantinya Contact Form cuma sanggup diakses lewat halaman Kontak saja. Mengapa dihapus? Mengapa tidak disembunyikan saja? Beberapa bimbingan yang berhubungan dengan hack blogger sering kali saya jumpai memakai tata cara menyembunyikan widget (dengan conditional tag). Cara ini menurut saya kurang efektif, lantaran widget contact form tidak akan ditampilkan di halaman mana saja, sehingga cara terbaik merupakan dengan meniadakan elemennya, bukan menyembunyikan/mengecualikan saja. Ingat yang dihapus cuma elemennya, bukan keseluruhan widget, lantaran kita tetap ingin menjaga register contact form aktif.

1. Buka dashboard > Template > Edit HTML.
2. Kemudian cari belahan isyarat widget contact form yang sudah dipasang sebelumnya dengan memakai fitur "Jump to Widget". Perhatikan gambar berikut:

3. Klik "ContactForm1" untuk menuju ke belahan widget tersebut, kemudian klik tanda panah di sebelah kiri isyarat 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 belahan antara <b:includable id='main'> dan </b:includable>. Sekali lagi widget akan terhampar lebih rinci, hapus belahan di dalam/di antara kedua tag b:includable tersebut. Perhatikan gambar berikut:

5. Perhatikan isyarat yang dihapus dengan benar, setelah dipastikan, save template.

Kostumisasi Sederhana Pada Contact Form

Susunan html contact form bawaan blogger secara default sungguh sederhana, lihat di sini. Tanpa kostumisasi, isyarat itu pun sudah siap digunakan. Untuk melakukan beberapa kostumisasi tambahan, saya memperlihatkan beberapa ilham sederhana dan masih sungguh mendasar, untuk hack CSS dalam beberapa rancangan menawan dan personal, akan saya ulasan pada kesempatan-kesempatan berikutnya.

Kostumisasi pertama yang saya lakukan merupakan merubah gunjingan perintah menyerupai "Name", "Email" yang secara default berada di atas kotak input menjadi di dalam kotak dan akan terhapus secara otomatis dikala di klik. Untuk memungkinkan ini, saya mengisi value sesuai dengan teks yang ingin ditampilkan dan memakai 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 merupakan menyertakan elemen input button selaku perintah reset/clear yang berfungsi meniadakan seluruh isi input pada form kontak. Yaitu:

<input class='contact-form-button contact-form-button-submit' type='reset' value='Reset'/>

Ketiga, saya menyertakan styling CSS dalam tag tersendiri utamanya untuk merubah lebar form biar sanggup diadaptasi dengan lebar halaman post, lantaran secara default contact form blogger sungguh sempit.

Keempat, merubah elemen yang menaungin gunjingan bahwa pesan sukses dikirim dari tag paragraf (p) menjadi division (div) Sebab jikalau ditampilkan dalam tag paragraf, background berwarna oranye akan tampil di belahan tersebut meski gunjingan 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>

1. Copy seluruh isyarat di atas dan pindahkan ke dalam text editor sederhana, misalnya notepad.

2. Lakukan kostumisasi di permulaan (atau di belakang juga boleh, hehe) untuk menyesuaikan beberapa elemen biar sesuai dengan halaman statis anda nantinya.

Berikut beberapa poinnya:

Teks yang berwarna merah merupakan gunjingan input yang nanti timbul 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 pengantaran 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 isyarat yang sudah dikostumisasi ke dalam editor.

Catatan penting:

Setelah memasukkan isyarat hingga proses menerbitkan/publish halaman, jangan sekalipun mengembalikan editor ke mode "Compose", lantaran mode compose secara otomatis akan parse berbagai jenis isyarat dan menghancurkan 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 merupakan ketiadaan fitur captcha, field yang sedikit, tidak sanggup upload file, dan tidak sanggup dikostumisasi dari segi server (ga ada akses, coy). Tapi menurut saya ini tetap bagus, yah tidak mengecewakan lah, dibandingkan dengan mesti memakai layanan contact form pihak ketiga yang memiliki batas. Dan menurut irit saya, Blogger (dan Google tentunya) sudah memiliki cara tersendiri untuk menanggulangi spam.

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