Untuk mengganti tampilan formulir Kontak dg CSS, sebelumnya sobat 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 sobat lakukan pada formulir kontak blog sobat 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 sobat
Berikut cara mengganti tampilan formulir Kontak dg CSS. Salin kode berikut ini sebelum ]]></b:skin> atau jika di template blog sobat 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 != ""'>
<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 + "_contact-form-name"' name='name' size='100' type='text' value='' placeholder='nama sobat'/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='100' type='text' value='' placeholder='email sobat'/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='150' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5' placeholder='tulis pesan sobat disini...'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
<p/>
</form>
</div>
</div>
</b:includable>
</b:widget>
Selesai. Dan lihat hasil perubahan dari tampilan contact form di blog sobat. 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
Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@