5 customization snippets for contact form in Blogger

For many Blogger widgets CSS customization snippets has been released,and contact form is one of them.As contact form was a big release and really a useful tool for those who are not have a hosting server.

Beside using contact form,you can choose online form generators to create a form,it could be free or paid.The more you pay the more features you will get.But,in my opinion Blogger contact form is a true solution.

 Read More:Add message and customize contact form in Blogger

To customize any of the style,add any of the following style,just before ]]></b:skin>

1. Simple Blue

.contact-form-widget
{
color: #00bfff;
font:normal 15px verdana;
}
.contact-form-widget input,.contact-form-widget textarea
{
background: #fff;
margin:5px 0;
border:1px solid #00bfff;
color: #00bfff;
}
.contact-form-widget input:focus,.contact-form-widget textarea:focus
{
border: none;
}
.contact-form-message
{
font:normal 12px 'open sans',sans-serif;
font-style:italic;
color:#BDBCBC;
}
.contact-form-widget .contact-form-button
{
background: #00bfff !important;
color: #fff;
padding:5px 15px;
}
.contact-form-widget .contact-form-button:hover
{
border: none;
}

2. Dotted Style 

.contact-form-widget
{
color: #333;
font:normal 15px sans-serif;
}
.contact-form-widget input,.contact-form-widget textarea
{
background: #fff;
margin:5px 0;
border:1px dotted #000;
color: #333;
}
.contact-form-widget input:focus,.contact-form-widget textarea:focus
{
outline:none;
}
.contact-form-message
{
font:normal 12px 'open sans',sans-serif;
font-style:italic;
color:#BDBCBC;
}
.contact-form-widget .contact-form-button
{
background: #333 !important;
color: #fff;
padding:5px 15px;
}
.contact-form-widget .contact-form-button:hover
{
border: none;
}

3. Shadow Style

.contact-form-widget
{
color: #333;
font:normal 15px sans-serif;
}
.contact-form-widget input,.contact-form-widget textarea
{
background: #fff;
margin:5px 0;
-webkit-box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 3px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 3px rgba(50, 50, 50, 0.75);
border:none;
color: #333;
}
.contact-form-widget input:focus,.contact-form-widget textarea:focus
{
outline:none;
}
.contact-form-message
{
font:normal 12px 'open sans',sans-serif;
font-style:italic;
color:#BDBCBC;
}
.contact-form-widget .contact-form-button
{
background: #333 !important;
color: #fff;
padding:5px 15px;
}
.contact-form-widget .contact-form-button:hover
{
border: none;
}

4. CSS3 animated fields w/ shadow style

.contact-form-name,.contact-form-email,.contact-form-email-message
{
width:80%;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
.contact-form-name:focus,.contact-form-email:focus,.contact-form-email-message:focus
{
width:100%;
}
.contact-form-widget
{
color: #333;
font:normal 15px sans-serif;
}
.contact-form-widget input,.contact-form-widget textarea
{
background: #fff;
margin:5px 0;
-webkit-box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 3px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 3px rgba(50, 50, 50, 0.75);
border:none;
color: #333;
}
.contact-form-widget input:focus,.contact-form-widget textarea:focus
{
outline:none;
}
.contact-form-message
{
font:normal 12px 'open sans',sans-serif;
font-style:italic;
color:#BDBCBC;
}
.contact-form-widget .contact-form-button
{
background: #333 !important;
color: #fff;
padding:5px 15px;
}
.contact-form-widget .contact-form-button:hover
{
border: none;
}

5. Flat Design

.contact-form-name,.contact-form-email,.contact-form-email-message
{
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
.contact-form-name:focus,.contact-form-email:focus,.contact-form-email-message:focus
{
}
.contact-form-widget
{
color: #333;
font:normal 15px sans-serif;
}
.contact-form-widget input,.contact-form-widget textarea
{
background: #fff;
margin:5px 0;
border:2px solid #FF6B50;
background:#ff8c77;
padding:5px;
color: #333;
}
.contact-form-widget input:focus,.contact-form-widget textarea:focus
{
outline:none;
}
.contact-form-message
{
font:normal 12px 'open sans',sans-serif;
font-style:italic;
color:#BDBCBC;
}
.contact-form-widget .contact-form-button,.contact-form-widget .contact-form-button:hover
{
color: #fff;
padding:5px 15px;
border:2px solid #FF6B50;
width:230px;
margin:5px auto;
}