Contact Form 7 is a super flexible form generator that we use on nearly every site but the default styling is non existant. Here is a bit of css and a couple images to over ride the default styling.
Here is a Demo
To style your form you need to add this css code to your main site CSS file and upload the images to your images folder inside your theme.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
/*------------------ Contact Form 7 Overide ---------------------*/
.wpcf7-form input, .wpcf7-form textarea{
padding:10px;
color:#8e8e8e;
font-family:Arial, Helvetica, sans-serif;
font-size:22px;
background-image:url("images/form-bg.png");
border:none;
border-right:solid 1px #CCC;
border-bottom:solid 1px #CCC;
}
.wpcf7-form input.wpcf7-submit{
background-color:transparent;
background-image:url("images/form-send.png");
background-repeat:no-repeat;
border:medium none;
color:#FFFFFF;
font-family:helvetica,arial;
font-size:18px;
font-weight:bold;
height:62px;
padding-top:0;
position:relative;
text-align:center;
text-shadow:0 0 3px #8D6D6F;
text-transform:uppercase;
width:128px;
}
.wpcf7-form input.wpcf7-submit:hover{
background-position:0 -96px;
cursor:pointer;
}
.wpcf7-form .wpcf7-validation-errors{
border:none;
background-color:#fffd75;
margin:0;
padding:20px;
border-radius:10px;
}
.wpcf7-form .wpcf7-mail-sent-ok{
border:none;
background-color:#abf779;
margin:0;
padding:20px;
border-radius:10px;
}
.wpcf7-form .wpcf7-mail-sent-ng{
border:none;
background-color:#fcb3b8;
margin:0;
padding:20px;
border-radius:10px;
}
.wpcf7-form span.wpcf7-not-valid-tip{
border:none;
background-color:#fcb3b8;
padding:10px;
border-radius:10px;
}
.wpcf7-form .fleft{
float: left;
}
.wpcf7-form .mright20{
margin-right: 20px;
}
.wpcf7-form .clear{
clear: both;
}
And here are the images.
You may also want to change the loading gif. Seeing as it’s embedded in the code you can’t fix it with css.
Add this to your functions.php and create your own colour coded loading gifs here ajaxload.info or preloaders.net
1 2 3 4 5 6 7 8 9
/* Custom ajax loader */
add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');
function my_wpcf7_ajax_loader () {
return get_bloginfo('stylesheet_directory') . '/images/ajax-loader.gif';
}



I used the above successfully until I went back to my theme builder and added a sidebar on the right. I updated the style.css to contain the override code for WP Contact Form. Activated the theme. Then the nice effect your code made went away. Since, I have gone back to the full sheet with no sidebar that shows your style. Have you noticed that problem?
Also, do you know of a way to nudge the send button over so it centers properly?
Thanks,
Carol
Hi Carol!
Looks like it’s working for you.
I would suggest not centering it though. It looks better left aligned. If you look at the code there is hidden loading gif next to the button. That is why it’s not right in the center.
This really transforms the contact form 7 default look – great job – have applied this to one of our client websites. Thanks :)
Hi, there! Sooo close….!
I have the line-height set to 200% for this site and the text on this page “Your Name”, etc) is inheriting that. How can I override it?
If I try to add any html to the contact page (Your Name (required)) I get a big ol error: Warning: Cannot modify header information)
I would be so grateful for any assistance!
Thank you! Works like a charm ;)
Hey dude!
I’ve been looking all over the internet for someone to help me with this form.
You can see the form on my website next to the navbar, it’s ugly and basic I know, can you help me spice this one up? The form is a “Call me” in Swedish.
Bests! Please respond to my mail.
Thank you, this is exactly what I needed.