Contact Form 7 Custom Styling

By /

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…

Contact Form 7 Styling

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;
}

40 thoughts on “Contact Form 7 Custom Styling”

        1. Gerardo Luis

          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.

          Reply
  3. Robin

    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

    Reply
  4. Chris Wharton

    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;

    }

    Reply
  6. Todd

    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!

    Reply
  8. Henry

    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

    Reply
  9. Vicky

    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.

    Reply
  10. Vidhu

    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?

    Reply
  12. Anders Sundstedt

    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 :)

    Reply
  13. Miranda

    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!

    Reply
  15. Rae

    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!

    Reply
  16. Bhargav

    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 :)

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top