Customization for Blogger custom contact form using CSS3

I've discussed about the newly released Blogger contact form.And I also told that I will do share a snippet to customize the form.So lets see what the snippet can do to customize your Blogger contact form with a whole new look.As it is a simple contact form,so therefore it is a need to give a bit touch to make it more visible.So lets begin by looking at demo.

DEMO

Find ]]></b:skin> and paste the following snippet just above it.

.form form
{
background: #3e3e3e;
border: 2px solid #a2a2a2;
padding: 10px;
}
.form
{
color: #fff;
font-family: segoe UI light;
font-size: 20px;
}
.contact-form-name,.contact-form-email,.contact-form-email-message
{
background: #f7f7f7;
border-radius: 5px;
color: #3e3e3e;
font-family: segoe UI light;
moz-transition: all .3s ease-in-out;
o-transition: all .3s ease-in-out;
padding: 5px;
transition: all .3s ease-in-out;
webkit-transition: all .3s ease-in-out;
}
.contact-form-name:hover,.contact-form-email:hover,.contact-form-email-message:hover
{
background: #fff;
border-radius: 0;
}