Kostumisasi Dasar Formulir Kontak
Pasang Blogger Contact Structure di Halaman Statis dan Kostumisasi Dasarnya
Sudah cukup lama sejak Blogger resmi merilis Contact Structure untuk pengguna stage Blogger. Fitur ini berupa gadget/contraption. Sayangnya, gadget ini jarang nongol di web journal site pengguna Blogger. Sebagian besar masih mengandalkan layanan contact frame complimentary yang tersedia di jagat web. Mungkin karena fitur-fiturnya lebih canggih, dan, yang pasti, banyak yang tidak ingin menyediakan contact structure dalam bentuk gadget; tampak kurang elegan dan khusus.
Nah dalam kesempatan ini, saya ingin memberikan sedikit trik agar gadget Contact Structure Blogger yang secara default ada di bagian gadget sidebar atau footerbar bisa dipindah dan dijadikan konten halaman statis (static page). Saya akan memberikan basicnya terlebih dahulu.
Karena ini saya maksudkan sebagai instructional exercise non-instan, maka akan saya beberkan beberapa poin penting dari elemen contact structure Blogger hingga bagaimana melakukan kostumisasi dasar dan meletakkannya di halaman statis blog.
The Essential of Blogger Contact Structure
Melalui fitur "perspective source" atau "page source" pada program, kita dapat melihat bagaimana susunan HTML pada gadget contact structure Blogger. Susunan HTML-nya cukup sederhana, berupa beberapa elemen information di dalam structure dan dinaungi oleh div, berbeda dengan contact structure pada umumnya yang dinaungi oleh elemen-elemen tabel.
Begitulah elemen dasarnya. Expositions producing information di dalam contact structure 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 motor Blogger bekerja. Yang jelas, pesan akan diteruskan ke email sesuai akun blog. Satu yang pasti, anda harus register (mengaktifkan/menggunakan) gadget contact structure terlebih dahulu meski nantinya akan melakukan hack dan menampilkannya di halaman statis, bukan di gadget. Tanpa register, contact structure tidak akan aktif.
Expositions yang akan dilakukan adalah:
A. Memasang Gadget Contact Structure
B. Menghapus Elemen Contact Structure Di Gadget Sidebar
C. Kostumisasi Sederhana Pada Contact Structure
D. Memasang Contact Structure di Halaman Statis
Cara Memasang Gadget Contact Structure
1. Masuk ke dashboard > format > include a device
2. Pilih Gadget/Device Contact Structure dan save/simpan.
3. Done.
Menghapus Elemen Contact Structure di Gadget Sidebar
Setelah anda memasang Contact Structure, maka gadget akan ditampilkan pada sidebar atau pada footer bar sesuai pilihan dan format anda. Kita harus menghapusnya agar nantinya Contact Structure hanya bisa diakses melalui halaman Kontak saja. Mengapa dihapus? Mengapa tidak disembunyikan saja? Beberapa instructional exercise yang berkaitan dengan hack blogger seringkali saya temui menggunakan metode menyembunyikan gadget (dengan restrictive tag). Cara ini menurut saya kurang efektif, karena gadget contact structure 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 gadget, karena kita tetap ingin mempertahankan register contact structure aktif.
1. Buka dashboard > Layout > Alter HTML.
2. Kemudian cari bagian kode gadget contact structure yang sudah dipasang sebelumnya dengan menggunakan fitur "Bounce to Gadget".
3. Klik "ContactForm1" untuk menuju ke bagian gadget tersebut, kemudian klik tanda panah di sebelah kiri kode gadget (grow) untuk membuka isi gadget tersebut, sebagaimana ditampilkan pada gambar berikut:
4. Gadget akan terbentang, dan sekali lagi klik tanda panah di sebelah kiri bagian antara <b:includable id='main'> dan </b:includable>. Sekali lagi gadget akan terbentang lebih rinci, hapus bagian di dalam/di antara kedua tag b:includable tersebut.
5. Perhatikan kode yang dihapus dengan benar, setelah dipastikan, spare format.
Kostumisasi Sederhana Pada Contact Structure
Susunan html contact structure bawaan blogger secara default sangat sederhana. Tanpa kostumisasi, kode itu quip sudah siap digunakan. Untuk melakukan beberapa kostumisasi tambahan, saya memberikan beberapa ide sederhana dan masih sangat mendasar.
Kostumisasi pertama yang di lakukan adalah mengubah informasi perintah seperti "Name", "Email" yang secara default berada di atas kotak info menjadi di dalam kotak dan akan terhapus secara otomatis saat di klik. Untuk memungkinkan ini, saya mengisi esteem 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 info catch sebagai perintah reset/clear yang berfungsi menghapus seluruh isi data pada structure 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 structure agar bisa disesuaikan dengan lebar halaman post, sebab secara default contact structure blogger sangat sempit.
Keempat, mengubah elemen yang menaungin informasi bahwa pesan berhasil dikirim dari tag paragraf (p) menjadi division (div) Sebab jika ditampilkan dalam label paragraf, foundation 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>
1. Duplicate seluruh kode di atas dan pindahkan ke dalam word processor sederhana, misalnya notebook.
2. Lakukan kostumisasi di awal (atau di belakang juga boleh untuk menyesuaikan beberapa elemen agar sesuai dengan halaman statis anda nantinya.
Berikut beberapa poinnya:
Teks yang berwarna Biru adalah informasi data yang nanti muncul pada information structure dan catch, 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 structure "nama" dan "email".
Ubah nilai di dalam max-width: 450px untuk menyesuaikan lebar structure pesan.
3. Pastikan kostumisasi sudah betul dan simpan dengan baik.
Memasang Contact Structure di Halaman Statis
1. Buat halaman statis, dashboard > pages > new page > clear page.
2. Setelah masuk ke halaman post manager, 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 proofreader.
Catatan penting:
Setelah memasukkan kode hingga compositions menerbitkan/distribute halaman, jangan sekalipun mengembalikan supervisor ke mode "Form", sebab mode create secara otomatis akan parse beberapa jenis kode dan merusak susunannya. Jika ingin sneak peak, gunakan fitur "Review/Pratinjau".
3. Setelah expositions alter dan kostumisasi contact structure beres, "Distribute" halaman tersebut.
4. Done!
-
Memang, sebagaimana banyak yang bilang, Blogger Contact Structure memiliki beberapa kelemahan, diantaranya adalah ketiadaan fitur captcha, field yang sedikit, tidak dapat transfer document, dan tidak bisa dikostumisasi dari sisi server (ga ada akses, bashful). Tapi menurut saya ini tetap bagus, yah lumayan lah, daripada harus menggunakan layanan contact structure pihak ketiga yang memiliki batas. Dan menurut hemat saya, Blogger (dan Google tentunya) sudah memiliki cara tersendiri untuk menangani spam.
Pasang Blogger Contact Structure di Halaman Statis dan Kostumisasi Dasarnya
Sudah cukup lama sejak Blogger resmi merilis Contact Structure untuk pengguna stage Blogger. Fitur ini berupa gadget/contraption. Sayangnya, gadget ini jarang nongol di web journal site pengguna Blogger. Sebagian besar masih mengandalkan layanan contact frame complimentary yang tersedia di jagat web. Mungkin karena fitur-fiturnya lebih canggih, dan, yang pasti, banyak yang tidak ingin menyediakan contact structure dalam bentuk gadget; tampak kurang elegan dan khusus.
Nah dalam kesempatan ini, saya ingin memberikan sedikit trik agar gadget Contact Structure Blogger yang secara default ada di bagian gadget sidebar atau footerbar bisa dipindah dan dijadikan konten halaman statis (static page). Saya akan memberikan basicnya terlebih dahulu.
Karena ini saya maksudkan sebagai instructional exercise non-instan, maka akan saya beberkan beberapa poin penting dari elemen contact structure Blogger hingga bagaimana melakukan kostumisasi dasar dan meletakkannya di halaman statis blog.
The Essential of Blogger Contact Structure
Melalui fitur "perspective source" atau "page source" pada program, kita dapat melihat bagaimana susunan HTML pada gadget contact structure Blogger. Susunan HTML-nya cukup sederhana, berupa beberapa elemen information di dalam structure dan dinaungi oleh div, berbeda dengan contact structure pada umumnya yang dinaungi oleh elemen-elemen tabel.
Begitulah elemen dasarnya. Expositions producing information di dalam contact structure 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 motor Blogger bekerja. Yang jelas, pesan akan diteruskan ke email sesuai akun blog. Satu yang pasti, anda harus register (mengaktifkan/menggunakan) gadget contact structure terlebih dahulu meski nantinya akan melakukan hack dan menampilkannya di halaman statis, bukan di gadget. Tanpa register, contact structure tidak akan aktif.
Expositions yang akan dilakukan adalah:
A. Memasang Gadget Contact Structure
B. Menghapus Elemen Contact Structure Di Gadget Sidebar
C. Kostumisasi Sederhana Pada Contact Structure
D. Memasang Contact Structure di Halaman Statis
Cara Memasang Gadget Contact Structure
1. Masuk ke dashboard > format > include a device
2. Pilih Gadget/Device Contact Structure dan save/simpan.
3. Done.
Menghapus Elemen Contact Structure di Gadget Sidebar
Setelah anda memasang Contact Structure, maka gadget akan ditampilkan pada sidebar atau pada footer bar sesuai pilihan dan format anda. Kita harus menghapusnya agar nantinya Contact Structure hanya bisa diakses melalui halaman Kontak saja. Mengapa dihapus? Mengapa tidak disembunyikan saja? Beberapa instructional exercise yang berkaitan dengan hack blogger seringkali saya temui menggunakan metode menyembunyikan gadget (dengan restrictive tag). Cara ini menurut saya kurang efektif, karena gadget contact structure 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 gadget, karena kita tetap ingin mempertahankan register contact structure aktif.
1. Buka dashboard > Layout > Alter HTML.
2. Kemudian cari bagian kode gadget contact structure yang sudah dipasang sebelumnya dengan menggunakan fitur "Bounce to Gadget".
3. Klik "ContactForm1" untuk menuju ke bagian gadget tersebut, kemudian klik tanda panah di sebelah kiri kode gadget (grow) untuk membuka isi gadget tersebut, sebagaimana ditampilkan pada gambar berikut:
4. Gadget akan terbentang, dan sekali lagi klik tanda panah di sebelah kiri bagian antara <b:includable id='main'> dan </b:includable>. Sekali lagi gadget akan terbentang lebih rinci, hapus bagian di dalam/di antara kedua tag b:includable tersebut.
5. Perhatikan kode yang dihapus dengan benar, setelah dipastikan, spare format.
Kostumisasi Sederhana Pada Contact Structure
Susunan html contact structure bawaan blogger secara default sangat sederhana. Tanpa kostumisasi, kode itu quip sudah siap digunakan. Untuk melakukan beberapa kostumisasi tambahan, saya memberikan beberapa ide sederhana dan masih sangat mendasar.
Kostumisasi pertama yang di lakukan adalah mengubah informasi perintah seperti "Name", "Email" yang secara default berada di atas kotak info menjadi di dalam kotak dan akan terhapus secara otomatis saat di klik. Untuk memungkinkan ini, saya mengisi esteem 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 info catch sebagai perintah reset/clear yang berfungsi menghapus seluruh isi data pada structure 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 structure agar bisa disesuaikan dengan lebar halaman post, sebab secara default contact structure blogger sangat sempit.
Keempat, mengubah elemen yang menaungin informasi bahwa pesan berhasil dikirim dari tag paragraf (p) menjadi division (div) Sebab jika ditampilkan dalam label paragraf, foundation 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>
1. Duplicate seluruh kode di atas dan pindahkan ke dalam word processor sederhana, misalnya notebook.
2. Lakukan kostumisasi di awal (atau di belakang juga boleh untuk menyesuaikan beberapa elemen agar sesuai dengan halaman statis anda nantinya.
Berikut beberapa poinnya:
Teks yang berwarna Biru adalah informasi data yang nanti muncul pada information structure dan catch, 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 structure "nama" dan "email".
Ubah nilai di dalam max-width: 450px untuk menyesuaikan lebar structure pesan.
3. Pastikan kostumisasi sudah betul dan simpan dengan baik.
Memasang Contact Structure di Halaman Statis
1. Buat halaman statis, dashboard > pages > new page > clear page.
2. Setelah masuk ke halaman post manager, 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 proofreader.
Catatan penting:
Setelah memasukkan kode hingga compositions menerbitkan/distribute halaman, jangan sekalipun mengembalikan supervisor ke mode "Form", sebab mode create secara otomatis akan parse beberapa jenis kode dan merusak susunannya. Jika ingin sneak peak, gunakan fitur "Review/Pratinjau".
3. Setelah expositions alter dan kostumisasi contact structure beres, "Distribute" halaman tersebut.
4. Done!
-
Memang, sebagaimana banyak yang bilang, Blogger Contact Structure memiliki beberapa kelemahan, diantaranya adalah ketiadaan fitur captcha, field yang sedikit, tidak dapat transfer document, dan tidak bisa dikostumisasi dari sisi server (ga ada akses, bashful). Tapi menurut saya ini tetap bagus, yah lumayan lah, daripada harus menggunakan layanan contact structure pihak ketiga yang memiliki batas. Dan menurut hemat saya, Blogger (dan Google tentunya) sudah memiliki cara tersendiri untuk menangani spam.
0 Response to "Costumisasi Dasar Contact Form"
Post a Comment
Silahkan Tinggalkan Comentar Anda
Satu Comentar Anda Sangat Berarti Buat Saya
Terima Kasih