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.

4 comments:

  1. Good One....Thank You

    ReplyDelete
  2. hi there, do you know my text is not in the box and the spacing is big. see link http://r2osoon.com/renttosell/contact-us-2 please advice thanks.

    ReplyDelete
  3. sorry but i can get it working.. I add your styles and nothing happens.
    I am using CF7 Version 3.1.1

    ReplyDelete