Blogger resmi merilis Contact Form untuk pengguna platform Blogger sudah cukup lama. Fitur ini berupa widget. 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, karena tampak kurang elegan.
Kali ini saya ingin memberikan sedikit cara agar widget Contact Form Blogger yang secara default ada di bagian widget sidebar atau footerbar bisa dipindah dan dijadikan konten halaman statis (static page) sebagaimana yang saya gunakan di halaman kontak blog ini.
Adapun 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
Ok, mari kita lakukan tahap demi tahap,
A. Cara Memasang Widget Contact Form :
1. Masuk ke dashboard > layout > add a gadget (bisa di sidebar atau di footerbar)
2. Pilih Widget/Gadget Contact Form dan save/simpan.
3. Done.
B. Menghapus Elemen Contact Form di Widget Sidebar:
Setelah Contact Form terpasang, maka widget akan ditampilkan pada sidebar atau pada footerbar sesuai pilihan dan template anda. Supaya Contact Form hanya bisa diakses melalui halaman Kontak saja, maka anda harus menghapusnya. Mengapa dihapus? Mengapa tidak disembunyikan saja?
Beberapa tutorial blogger yang saya jumpai berkaitan dengan customisasi Contact Form ini seringkali saya temui menggunakan metode menyembunyikan widget (dengan conditional tag).
Cara ini menurut saya kurang efektif, karena widget contact form tidak akan bisa 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:
4. Widget akan terbentang, dan sekali lagi klik tanda panah di sebelah kiri bagian antara <b:includable id='main'> dan </b:includable>. Widget akan terbentang lebih rinci, hapus bagian di dalam/di antara kedua tag b:includable tersebut. Perhatikan gambar berikut:
C. Kostumisasi Sederhana Pada Contact Form
Susunan html contact form bawaan blogger secara default sangat sederhana, tanpa kostumisasi, kode itu pun sudah siap digunakan.
Kostumisasi yang kita 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
- menambahkan elemen input button sebagai perintah reset/clear yang berfungsi menghapus seluruh isi input pada form kontak
- 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.
- mengubah elemen yang menaungi 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 scrip code nya:
<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>
Langkah kastemisasinya :
1. Copy seluruh kode di atas dan pindahkan ke dalam text editor sederhana, misalnya notepad.
2. Lakukan kostumisasi untuk menyesuaikan beberapa elemen agar sesuai dengan halaman statis anda nantinya.
- 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.
D. 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 "Hubungi kami", "Contact Us", "Kontak Kami", dll. Lalu pilih mode "HTML" dan masukkan kode yang sudah dikostumisasi ke dalam editor.
Catatan:
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. Dan lihat hasilnya seperti ini
Semoga bermanfaat.
Sumber : @
0 komentar:
Posting Komentar