Jadi cerita singkatnya kita ingin membuat tampilan menu Kontak untuk blog tanpa harus registrasi di pihak ketiga yang biasanya memberikan suppot agar bisa memasang kontak form di blog kita dengan link script dari pihak ketiga.
Kelebihan dan membuat kontak Form dari dasar Css bloger, kita dapat mengkustomize form tersebut sesuai dengan yang kita inginkan.
artikel ini sendiri chekmad dapatkan dari hasil blogwalking ke blog nya Ahmad khairul Azmi, berikut cara yang chekmad dapatkan dan sudah berhasil chekmad coba (lihat hasilnya disini)
Proses yang akan dilakukan adalah:
- Memasang Widget Contact Form
- Menghapus Elemen Contact Form Di Widget Sidebar
- Kostumisasi Sederhana Pada Contact Form
- Memasang Contact Form di Halaman Statis
Cara Memasang Widget Contact Form
- Masuk ke dashboard > layout > add a gadget
- Pilih Widget/Gadget Contact Form dan save/simpan.
- Selesai
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 di temui menggunakan metode menyembunyikan widget (dengan conditional tag).
Cara ini menurut khairul Azmi 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.
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.
Pertama 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.
Kedua adalah menambahkan elemen input button sebagai perintah reset/clear yang berfungsi menghapus seluruh isi input pada form kontak.
Ketiga, 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 hasil akhirnya seperti ini yang chekmad dapat dari sumber Ahmad Khairul Azmi.
<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>
- Copy seluruh kode di atas dan pindahkan ke dalam text editor sederhana, misalnya notepad.
- 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.
Memasang Contact Form di Halaman Statis
- Buat halaman statis, dashboard > pages > new page > blank page.
- 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.
- Setelah proses edit dan kostumisasi contact form beres, "Publish" halaman tersebut.
- Selesai
Sumber artikel : Buka Rahasia.blog