test

Cara Membuat Formulir Kontak Kostumisasi Pada Blogger

17:28
Cara Membuat Formulir Kontak Kostumisasi Pada Blogger - Dunia Chayoy
Pada dasarnya ketika kita membuat formulir kontak dari bawaan blogger, apabila kita memasangnya hanyak akan terpasang pada widget sidebar atau widget teman chayoy, tapi dengan sedikit kostumisasi kita bisa memindahkannya ke laman statis dan juga bisa memodifikasi bentuk dari form tersebut. Walaupun sebenarnya dari pihak ketiga sudah banyak yang menyediakan formulir kontak seperti emaimrform, tapi saya lebih suka yang yang bawaan blogger.
Oke, dari pada banyak bacot, langsung saja dech TKP. Proses yang akan dilakukan adalah:
  1. Memasang Widget Contact Form
  2. Menghapus Elemen Contact Form Di Widget Sidebar
  3. 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 teman chayoy memasang Contact Form bawaan blogger, maka widget akan ditampilkan pada sidebar atau pada footer bar sesuai pilihan dan template teman chayoy. nah teman chayoy harus menghapusnya agar nantinya Contact Form hanya bisa diakses melalui halaman Kontak saja. Caranya:
  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. Save
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", Lalu pilih mode "HTML" dan masukkan kode dibawah ini :
    <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>
  3. Lalu Publish dan lihat hasilnya

Sekian untuk tips blog kali ini, memang agak sedikit rumit, tapi dengan sedikit usaha pasti bisa. semoga bisa bermamfaat buat teman chayoy semua. Terima Kasih.

Post a Comment