Contact Form 7 Custom Styling

Ever wanted a really easy way to sort out the error styling on the popular Contact Form 7 Plugin for WordPress? The following CSS will give you some solid error styling out of the box and put the errors into block level (in flow with the form) errors rather than the hover over thing it does by default.

body input[type=text].wpcf7-not-valid, body input[type=email].wpcf7-not-valid, body input[type=tel].wpcf7-not-valid, body textarea.wpcf7-not-valid {
border: 1px solid #ec3c06;
}

body span.wpcf7-not-valid-tip {
display: block;
color: #ec3c06;
border: none;
position: relative;
top: auto;
left: auto;
padding: 0;
margin-top: 2px;
background: none;
font-size: 15px;
}

body div.wpcf7-validation-errors {
background: #ffe2e2;
border: 1px solid #ff8a8a;
color: #ec3c06;
}

body div.wpcf7-response-output {
margin: 10px 0;
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 5px;
}

body .wpcf7-mail-sent-ng {
background: #fff2e2;
border: 1px solid #ffbc8a;
color: #e17731;
}

body .wpcf7-mail-sent-ok {
background: #e8ffe2;
border: 1px solid #6fdf51;
color: #1ea524;
}

Which will look like this…

Oh and if you are using CAPTCHA, pop this little snippet in your CSS too…

.wpcf7-captchac {
padding: 20px 40px;
border: 1px solid #dee1e1;
margin-bottom: 10px;
}

Finally, if you have no CSS whatsoever to deal with standard form elements for inputs and textareas, here is a quick start for you…

textarea, input[type=text], input[type=email], input[type=url], input[type=password] {
border: 1px solid #ccc;
padding: 10px 20px;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}