Monday, February 28, 2011

Styling 'Contact form 7' Contact form for Wordpress


The 'Contact Form 7' is really an awesome plugin for Wordpress for adding contact form to our wordpress blog and getting mail to our inbox instantly. I guess maximum number of users might be using it in their blog. I thought of making the contact form more stylish and colorful using the CSS3. Styling the contact form is no way difficult. You just need to add the code you get here in the bottom of the css code of Contact Form 7.
looks confusing ??
  1. Go to Plugins
  2. Click Edit in Contact Form 7
  3. Click on contact-form-7/styles.css in Plugin Files list (which is at the right sidebar)
Now add the additional code in the bottom of the codes. You can see some sample contact forms and its code below the image preview


.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #000;
padding: 6px 6px 6px 8px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff),
color-stop(100%,#e5e5e5)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',
endColorstr='#e5e5e5',GradientType=0 ); /* ie */
}



.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #000;
padding: 6px 6px 6px 8px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #49c0f0; /* old browsers */
background: -moz-linear-gradient(top, #49c0f0 0%, #2cafe3 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#49c0f0),
color-stop(100%,#2cafe3)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0',
endColorstr='#2cafe3',GradientType=0 ); /* ie */
}



.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #000;
padding: 6px 6px 6px 8px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #ffd65e; /* old browsers */
background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e),
color-stop(100%,#febf04)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e',
endColorstr='#febf04',GradientType=0 ); /* ie */
}

.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #fff;
padding: 6px 6px 6px 8px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #a4b357; /* old browsers */
background: -moz-linear-gradient(top, #a4b357 0%, #75890c 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357),
color-stop(100%,#75890c)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357',
endColorstr='#75890c',GradientType=0 ); /* ie */
}



.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #09749f;
padding: 6px 6px 6px 8px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #a9e4f7; /* old browsers */
background: -moz-linear-gradient(top, #a9e4f7 0%, #0fb4e7 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7),
color-stop(100%,#0fb4e7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7',
endColorstr='#0fb4e7',GradientType=0 ); /* ie */
}


.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #686868;
padding: 6px 6px 6px 8px;
border: 1px solid #5998f7;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 1px 3px #5998f7;
-o-box-shadow: 0 1px 3px #5998f7;
-webkit-box-shadow: 0 1px 3px #5998f7;
-moz-box-shadow: 0 1px 3px #5998f7;
}

You can request me if you would like to have different design based on your website design.

1 comments:

ahmed said...

nice post

Post a Comment

 

Androidirsh Blogger Template Designed by TechIrsH