Kamis, 23 Mei 2013

Mengganti Tampilan Formulir Kontak dg CSS

Mengganti Tampilan Formulir Kontak dg CSS - Sudah ada 2 artikel yang saya bahas tentang widget baru Blogspot ini yaitu Contact Form atau Formulir Kontak. Jika pada 2 artikel sebelumnya saya telah membahas tentan pemberitahuan widget Formulir Kontak di Widget Formulir Kontak dan pembahasan memasang Contact Form di halaman blog. Maka pada artikel kali ini saya akan menjelaskan bagaimana Mengganti Tampilan Formulir Kontak dg CSS

Mengganti Tampilan Formulir Kontak dg CSS

Untuk mengganti tampilan formulir Kontak dg CSS, sebelumnya anda harus sudah memasang widget Contact Form ini jika tidak akan bisa menerapkan artikel yang saya bahas ini.

Sebelum melanjut pembahasan ini perlu saya beritahukan bahwa dengan mengganti tampilan Contact Form tidak akan mempengaruhi proses pengiriman email yang dilakukan alias dengan melakukan perubahan ini, Contact Form atau Formulir Kontak tetap bekerja alias WORK! Namun saya tidak menjamin dengan perubahan yang anda lakukan pada formulir kontak blog anda karena (saya yakin) artikel yang saya buat ini merupakan artikel pertama yang membahas perubahan pada tampilan Formulir Kontak dan perubahan-perubahan yang saya lakukan ini awalnya hanyalah coba-coba saja, berhubung perubahan yang saya lakukan berhasil dan bekerja di template blog saya, maka saya membaginya untuk anda

Berikut cara mengganti tampilan formulir Kontak dg CSS. Salin kode berikut ini sebelum ]]></b:skin> atau jika di template blog anda menggunkan kode konversi, salin sebelum </style>

#ContactForm1 {width:550px;background:#2C678A;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius: 5px;}
#ContactForm1 .contact-form-widget{margin:0;padding:10px;background:#2C678A;color:#fff;border: 2px solid #2C678A;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius: 5px;}
#ContactForm1 form {margin:0;}
#ContactForm1 .contact-form {}
#ContactForm1 span {color:#FF0000;}
#ContactForm1 .contact-form-name, #ContactForm1 .contact-form-email, #ContactForm1 .contact-form-email-message {width:100%;border: 1px solid #2C678A;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
#ContactForm1 .textform {color:#fff;font-size:11px;font-style:italic;margin-bottom:10px;}
#ContactForm1 .contact-form-button {width:100px;border: 1px solid #2C678A;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.widget.ContactForm {display: none;}
selanjutnya, cari dan ganti kode diantara kode berikut ini
<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'> ... </b:widget>

Sehingga hasilnya seperti berikut

          <b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'>
            <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='100' type='text' value='' placeholder='nama anda'/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='100' type='text' value='' placeholder='email anda'/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='150' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5' placeholder='tulis pesan anda disini...'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p class='textform'>Email spam (eg: penawaran produk, dll), email akan ditampilkan sebagai email spammer! Terimakasih</p>
        <div style='text-align: center; max-width: 100px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
        <p/>
      </form>
    </div>
  </div>
</b:includable>
          </b:widget>

Selesai. Dan lihat hasil perubahan dari tampilan contact form di blog anda. Sebagai catatan, setelah pemasangan mungkin ada tampilan yang kurang seperti kolom teks untuk nama dan email biasanya terlalu sempit, untuk mengatasinya silahkan tinggalkan komentar terlebih dahulu karena setiap permasalahan, ada yang beda dan tidak. Terimakasih, semoga setelah membaca ada manfaat dari artikel ini, Mengganti Tampilan Formulir Kontak dg CSS

Mengganti Tampilan Formulir Kontak dg CSS Rating: 4.5 Diposkan Oleh: ana sriwahyuni

13 komentar:

  1. Ternyata tampilannya bisa diganti juga ya Mbak dengan css,tapi itu dia apakah tambah pengaruh nanti sama berat css sama loading blognya nanti.

    BalasHapus
  2. Bookmark dulu Mbak bentaran pakai cssnya ini untuk form komentar barunya.

    BalasHapus
  3. terima kasih informasinya gan sangat membantu sekali buat saya yang masih belajar ngeblog..!! thanks

    BalasHapus
  4. ada screenshotnya...
    makasih ya... :)
    ditunggu trik berikutnya..

    BalasHapus
  5. blog ini sudah saya follow, gantian follow back, lah ! dapatkah.blogspot.com

    BalasHapus
  6. Bookmark dulu ini yah Mbak,thks Mbak :)

    BalasHapus
  7. nice post, wah keren, bakalan saya terampkan diblog saya

    filestone(download game and software new version)

    BalasHapus
  8. Kalo yang di share MBT, ada tambahan tombol clear mbak, sama ada perbaikan tampilan juga, jadi lebih keren.

    BalasHapus
  9. ko' punya ane tetep di sidebarnya om gan?

    mohon solusinya....

    BalasHapus
    Balasan
    1. silahkan buka juga artikelnya di panduantemplateblog.blogspot.com/2013/05/cara-memasang-formulir-kontak-halaman.html

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia