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;
}
tłumacz September 2, 2013 at 4:22 pm
Hi, first of all thank you for sharing. I would like to ask where to copy/paste this css? to theme or plugin files?
Chris Wharton September 18, 2013 at 9:37 am
You should paste this into your theme, not the plugin as the plugin will wipe the code should you update it if you’ve added it to the plugin.
Sakia Taylor September 19, 2013 at 4:18 pm
When I enter this code into my CSS it does not change the styling of my form. What might I be doing wrong?
Thanks
Chris Wharton September 24, 2013 at 8:15 am
Hi Sakia, its hard to tell without a link, if you can send one I’ll take a quick look.
Robin September 24, 2013 at 8:21 am
Hey there. Same with me. When I paste it, nothing happens.
Kind Regards
RObin
Gerardo Luis May 11, 2015 at 8:23 am
Hi, Chris!
Your code work fine in name field (text), email field (email) and telephone field (tel), but…
How can I put a not valid highlight border in MESSAGE FIELD (textarea)?
Thanks in advance.
Chris Wharton May 11, 2015 at 8:51 am
Hey there, the CSS is already there for that, in the top line… “body textarea.wpcf7-not-valid”.
Robin September 23, 2013 at 3:39 pm
Hey Mate
Lovin the Design. Really nice. Ive been searching now for ages how to implement this Layout to WordPress. But I cannot find anything, or atleast nothing that helps me out. I get that I have to put that in the Themes stlye.css, but even if I put it there it just doesnt work. Any help with that ? do I have to do something else im missing ?
Thanks so much for the help. Kind Regards
Robin
Chris Wharton September 24, 2013 at 8:16 am
Hi Robin, yes paste it into your theme css and it should work
Chris Wharton September 24, 2013 at 8:22 am
Links please people :) I can’t fix a problem that I can’t see.
Robin September 24, 2013 at 2:18 pm
Sure Thing. What kind of Link do you need ? The Websites Link ?
Chris Wharton September 24, 2013 at 2:20 pm
Hi Robin, yes the web link of the page where the custom styling is not working.
Robin September 26, 2013 at 7:53 am
Hey Mate
So this is the Link:
http://new.emmalanford.com/?page_id=20
I will post your Code into the style.css right now again ;-)
Kind Regards
Robin
Chris Wharton September 26, 2013 at 7:59 am
Hi Robin, that’s working fine, obviously you need some code to sort out your standard inputs etc. but the error styling provided above is working just fine.
If you want to tidy up your inputs etc. just do the following…
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;
}
Robin September 27, 2013 at 12:43 pm
SWEET, thanks so much !!!
Ronnie Morales October 5, 2013 at 9:39 am
Wow! This is perfect! I really appreciate you sharing this snippet to everyone!
Thanks!
Chris Wharton November 25, 2013 at 9:29 pm
No worries
Todd October 7, 2013 at 2:56 pm
Hi Chris
Great tutorial. With this I was able to adjust my CSS to include both elements from you design as well as my themes.
Two questions – how can I style the dropdown and choose file to match. You can see my dev site at http://bit.ly/16O55lW.
Thanks!
Chris Wharton November 25, 2013 at 9:30 pm
Hi Todd, sorry this one went into spam :( the link looks good to me
Connie October 23, 2013 at 10:03 am
Hi! I am using a derivate of the contact form 7 plugin:
http://wordpress.org/plugins/contact-form-7-for-multiple-recipients/
and I see, that both plugins DO USE CSS, styles.css
the plugin calls wp-contentpluginscontact-form-7includescss
So I assume that these definitions are read and those in the theme’s stylesheet?
Am I right?
Chris Wharton November 25, 2013 at 9:28 pm
Yes, add them to your theme CSS
Henry October 29, 2013 at 5:10 pm
Hi I need smaller letters for the red error message which line I should change? Also do you have any different skin for the contact form I would like to have it a different background and the button look ridiculously small.
Thanks
Chris Wharton November 25, 2013 at 9:27 pm
Hi Henry, you should be able to adjust that on this line…
body div.wpcf7-response-output
Vicky November 25, 2013 at 10:37 am
Thank you Chris – this works like a dream, and is so much better than the default styling. I applied it to my form with no changes, and it looks great. Thank you so much for sharing it.
Vidhu February 28, 2014 at 5:10 pm
Hi I added the following css to my styles.css in contact form 7 plugin they seem to work fine on all of the browsers, except chrome. The error messages are displayed but the styles from styles.css are not getting applied, also on hover the error msg does disappear. I checked the generated html and the class that got applied to span, it is “wpcf7-not-valid-tip-no-ajax”. Please help!
Also do we have to change the style-rtl.css file?
Chris Wharton March 5, 2014 at 10:56 am
What’s the link?
Mandar Sant October 16, 2014 at 4:02 pm
Where to insert this code in wordpress?
Chris Wharton January 29, 2015 at 1:55 pm
In your stylesheet, preferably in somewhere that won’t get overwritten should you upgrade
Anders Sundstedt January 8, 2015 at 2:10 pm
Hi,
I’ve inserted this code in theme CSS but nothing happens.
Please help :)
http://sundstedt.se/blog/contact-us/
Anders
Anders Sundstedt January 8, 2015 at 2:16 pm
Hi,
It worked when I disabled W3 Total Cache :)
So is there a way to fix that?
Question: How do I remove the following items above the fields when pressing send?
There was a problem with your submission. Errors have been highlighted below. Please confirm the fields and submit it again.
This field is required.
This field is required.
This field is required.
This field is required.
This field is required.
I feel I only need your custom messages now, not these as well :)
Chris Wharton January 29, 2015 at 1:56 pm
It looks like you solved this one :)
Miranda March 7, 2015 at 2:01 pm
Great tip, thanks for sharing! I was specifically looking for the class names to use for the various reponse boxes that pop up on form submission, .wpcf7-mail-sent-ng is the one I was missing. (That’s the orange bordered message that pops up when the form fails to send, right?) I got some good inspiration from your choice of styles as well, the red border on the invalid input fields is a nice touch!
Anders Sundstedt July 31, 2016 at 10:47 am
Chris I forgot to thank you for the help on contact form 7 custom styling! I got it working and I also found how great it is to use Google Chrome Inspect Code to see and experiment with your stylings. Something everyone should know about!
Have a look at my custom contact form now: http://sundstedt.se at the bottom of the page or on the contact page itself http://sundstedt.se/blog/contact/
Thanks,
Anders
Chris Wharton August 1, 2016 at 8:42 am
Lovely, well done Anders!
Anders Sundstedt May 7, 2019 at 5:07 pm
Thank you Chris,
Your page about custom styling has been a great help for me on my Sundstedt Animation website https://sundstedt.se and I keep returning to this post when I need to refresh my contact form 7 knowledge. I am sure I will be back again!
Rae September 22, 2016 at 2:35 am
Absolutely loved finding this code…awesome! Thank you! I struggled quite a bit with trying to get those floating errors to look right, and it just wasn’t working. This code makes it look very clean. Nice!
Chris Wharton September 22, 2016 at 2:40 pm
Glad I could help Rae :)
Bhargav February 21, 2018 at 9:41 pm
This is the easiest and most comprehensive style guide on Contact Form 7 I’ve found yet. After getting frustrated with posts elsewhere, this one has everything I need in one place and works.
Thank you so much :)
Chris Wharton March 5, 2018 at 9:25 am
Thanks Bhargav, glad it worked L:)