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

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>

REAL DEMO

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