Kumpulan Trick Blog TErbaru

About

New Trick hayalah blog kecil yang mencoba untuk memberikan dan menyajikan trick dan tips tentang blog
Minggu, 22 Mei 2016

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 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 != &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 sobat'/>
<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 sobat'/>
<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 sobat 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 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@

TOP