How to Customize new blogger contact form gadget with CSS

Published


Its a  very nice thing that blogger has a new contact form gadget that can be installed in any blogger blog.
before this, many, used to adopt contact from from Google docs.
but the thing is something simpler than anything, user enter a valid name, valid email, and subject text to form and when submit, it send to to owner of blog  without loading the page.
if you have not already installed blogger contact form gadget in your blog, its time to add that, here is how you can add blogger contact form gadget to your blog.

So, after installing the new blogger contact form for blogger, you can customize the appearance of contact form with css.

Here is a simple css Snippet that change the appearance of the Blogget contact form.



#ContactForm1_contact-form-name {} //Style Input field where use have to enter name
#ContactForm1_contact-form-email {} //Style Input field where use have to enter e-mail
#ContactForm1_contact-form-email-message {}  //Style TextArea field where use have to enter e-mail message.
#ContactForm1_contact-form-submit {} //Style submit button of the form


Example (Which i have used in my blog)



#ContactForm1_contact-form-name {border: 1px solid #6B0C23;border-top: 1px solid #350E0E;}
#ContactForm1_contact-form-email {border: 1px solid #6B0C23;  border-top: 1px solid #350E0E;}
#ContactForm1_contact-form-email-message {border: 1px solid #6B0C23;  border-top: 1px solid #350E0E;}
#ContactForm1_contact-form-submit:active,#ContactForm1_contact-form-submit:focus:active,#ContactForm1_contact-form-submit.focus.active {-webkit-box-shadow: none;  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);box-shadow: none;}
#ContactForm1_contact-form-submit {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDFNC0Sr_xXjcdRgGYYZEgUuW_KmFKumWwp65nhqqVXy2owuvuqlwpRiZjyoU3Nnvb0O3pV5Aprv6mvYwDB5o8AbVbUi9dvFvWopWwQ5yP6f0g4YW7a1Kx413XOstZ4fP_uYIwul_kMn8F/s1600/footer_button.png) no-repeat scroll -2px 0;  height: 42px;  width: 97px;  border: 0px transparent;  color: white;  margin: 0px auto;}
#ContactForm1_contact-form-submit:hover {-webkit-box-shadow: none;box-shadow: none;}



Comments

Post a Comment