Style The Response Messages For Contact Form 7

Updated March 23, 2017     30 Comments
Originally posted June 19, 2014

Front End Design, WordPress Code Snippets

This CSS will style the “Validation errors” message box and the “Thank you for your message” message for the Contact Form 7 WordPress plugin.

By default, Contact Form 7 shows this error message when the contact form is not properly filled out:

“One or more fields have an error. Please check and try again.”

And, it shows this message when the contact form is sent:

“Thank you for your message. It has been sent.”

These response messages from Contact Form 7 have a border for styling. You can change the style of these message boxes by adding the following CSS. (See how to add CSS.)

This CSS will make the Contact Form 7 response message boxes look like in the picture above.

This CSS example uses the WordPress dashicons, so if your theme does not load the dashicons stylesheet, you can load it in the footer by adding this to your footer.php:

<?php wp_enqueue_style( 'dashicons' ); ?>

If you prefer not add the dashicons, please see below for two other styling examples.

The CSS:

.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors {
    color: #D8000C;
    background-color: #FFBABA;
    border: 0;
    padding: 10px;
}
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    color: #4F8A10;
    background-color: #DFF2BF;
    border: 0;
    padding: 10px;
}
div.wpcf7-mail-sent-ok:before,div.wpcf7-validation-errors:before {
    font: 26px/30px dashicons;
    margin-right: 16px;
    vertical-align: middle;
}
div.wpcf7-mail-sent-ok:before {
    content: "\f147";
}
div.wpcf7-validation-errors:before {
    content: "\f158";
}

Other Styling Examples

If you prefer not to load the WordPress dashicons, here are two more examples of styling the Contact Form 7 message boxes.

  1. Font Awesome

    If you are already using Font Awesome on your site, you can use the Font Awesome icons instead of the dashicons. To use Font Awesome icons, use this CSS instead of the one above (this assumes you have a theme or plugin which is already loading Font Awesome icons):

    .wpcf7-form .wpcf7-response-output.wpcf7-validation-errors {
    color: #D8000C;
    background-color: #FFBABA;
    border: 0;
    padding: 10px;
}
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    color: #4F8A10;
    background-color: #DFF2BF;
    border: 0;
    padding: 10px;
}
div.wpcf7-mail-sent-ok:before,div.wpcf7-validation-errors:before {
    font: 26px/30px FontAwesome;
    margin-right: 16px;
    vertical-align: middle;
}
div.wpcf7-mail-sent-ok:before {
    content:'\f00c';
}
div.wpcf7-validation-errors:before {
    content:'\f057';
}
  2. No Icons

    You can have the colorful red and green message boxes with no icons. To do it this way, just use only lines 1–12 of either of the CSS examples above.

You may also want to check out this lightweight contact form plugin for WordPress.

See more:

We've 30 Responses

  4. February 23rd, 2017 at 9:12 pm

    Really helpful – thanks! I was wondering how I would structure the syntax to have the wpcf1-not-valid-tip entries to the be on a red background. I am not sure how to refer to these tips in the CSS.

    Thx

    Reply ↓
    Suze Kenington

  6. April 6th, 2017 at 6:47 pm

    Hey there, I’m not a programmer but I managed to create a decent form using CF7. I don’t like the green response bar but could not figure out how to change the color. I tried using the first 12 lines of your code, only changed font color. Thanks in advance. 

    h4 {
    font-family: "Tahoma", sans, serif;
    text-align: center;
    padding: 20px;
}

.wpcf7 input[type="Submit"] {
    padding:10px; 
    color:#434343;
    font-size:20px;
    font-family: "Tahoma";
    border:0 none;
    cursor:pointer;
    border-radius: 5px;
    width: 50%;
    margin-left: 190px;
    border: 6px double #96BADD;
}

.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 input[type=message], .wpcf7 input[type=fullName], .wpcf7 .wpcf7-select{
    font-size:20px;
    border: 6px double #96BADD;
    border-radius: 8px;
}
.wpcf7 {
   background-color:#96badd;
   border-radius: 8px;
}

#left {
    width: 45%;
    float: left;
    margin-right:2%;
   
   
}
 
#right {
    width: 45%;
    float: left;
    
}
 
.clearfix:after {
    content:"\0020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
    margin-bottom:0px;
    
}
 
.clearfix {
    display:block;
}
    Reply ↓
    Michael

        • April 8th, 2017 at 6:01 pm

          Is it possible that your theme is adding custom styles for Contact Form 7 (many themes do)? If so, they could be overriding these styles. You could still override those, but I would need to see a link to the page to see what CSS is overriding.

          Reply ↓
          Isabel

          • April 8th, 2017 at 9:04 pm

            Okay, yes, your theme sets custom styles for Contact Form 7, and its using the keyword “!important” to force their colors to override other colors. To override that, you also have to add !important to the colors, like this:

            .wpcf7-form .wpcf7-response-output.wpcf7-validation-errors {
    color: #420518 !important;
    background-color: #420518 !important;
    border: 0;
    padding: 10px;
}
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    color: #420518 !important;
    background-color: #420518 !important;
    border: 0;
    padding: 10px;
}

            Note that the text color and background color are set to the same color on these lines (a wine color). So, edit them with your desired color codes. Hope that helps.

            Isabel

  7. April 9th, 2017 at 6:54 am

    Isabel, I added the code as stated by you. It still made no changes to the green banner. I added the purple/plum color only to see a drastic change. I really want black and white.

    I really ant the form to appear like this: https://www.w3schools.com/code/tryit.asp?filename=FE1OT7GF4FJB

    Question? Do I really need the theme? It changes the colors and fonts and it seems to cause more problems. In the 2 weeks i’m doing this I can manage to figure it out.

    BTW, I’ve been in Mortgage Banking and real estate for 30 years. If you ever need any sound advice or strategy please don’t hesitate to contact me.

    .wpcf7-form .wpcf7-response-output.wpcf7-validation-errors {
    color: #000; !important;
    background-color: #000; !important;
    border: 0;
    padding: 10px;
}
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    color: #420518; !important;
    background-color: #420518; !important;
    border: 0;
    padding: 10px;
}
    Reply ↓
    Michael

  9. August 1st, 2017 at 10:07 am

    <3 Thank you for this. I am sending you heaps of love for fixing an issue that neither the developers of my custom theme nor the CF7 wanted to address.

    Reply ↓
    m

  12. October 18th, 2017 at 5:53 am

    Hi Isabel,
    Awesome code. I thought loading font-awesome for just 2 icons might be an overkill for some.

    Here I am using HTML entities https://www.w3schools.com/charsets/ref_utf_dingbats.asp

    [code]

    .wpcf7-form .wpcf7-response-output.wpcf7-validation-errors,
    .wpcf7-not-valid-tip {
    color: #D8000C;
    background-color: #FFBABA;
    border: 0;
    padding: 10px;
    }
    .wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    color: #4F8A10;
    background-color: #DFF2BF;
    border: 0;
    padding: 10px;
    }
    div.wpcf7-mail-sent-ok:before,div.wpcf7-validation-errors:before,
    .wpcf7-not-valid-tip:before {
    margin-right: 16px;
    vertical-align: middle;
    font-size: 2em;
    }
    div.wpcf7-mail-sent-ok:before {
    content: “✔”;
    }
    div.wpcf7-validation-errors:before,
    .wpcf7-not-valid-tip:before {
    content: “✘”;
    }

    [code]

    Reply ↓
    Vijay Rudraraju

  19. August 11th, 2020 at 7:38 pm

    Hello Isabel its seem cf7 has changed the events, I had to made some changes that I share with you 🙂
    Please see below,
    Regards,
    Carlos Magallon

    
.wpcf7 form .wpcf7-response-output {
	margin-top: 50px;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    color: #D8000C;
    background-color: #FFBABA;
    border: 0;
    border-radius: 5px;
    padding: 10px;
}

.wpcf7 form.sent .wpcf7-response-output {
    color: #4F8A10;
    background-color: #DFF2BF;
    border: 0;
    border-radius: 5px;
    padding: 10px;
}

.wpcf7 form.invalid .wpcf7-response-output:before,
.wpcf7 form.unaccepted .wpcf7-response-output:before,
.wpcf7 form.sent .wpcf7-response-output:before {
    font: 26px/30px FontAwesome;
    margin-right: 16px;
    vertical-align: middle;
}

.wpcf7 form.invalid .wpcf7-response-output:before,
.wpcf7 form.unaccepted .wpcf7-response-output:before {
    content:'\f057';
}

.wpcf7 form.sent .wpcf7-response-output:before {
    content:'\f00c';
}
    Reply ↓
    Carlos Magallon

  20. September 2nd, 2020 at 1:25 pm

    Hi Isabela,

    don’t know if I’m using a different version of CR7 than the one you’re using.

    Your code out-of-the-box did not work.

    After digging into the css, I’ve modified it a bit and now it works great for me.

    I’ve also used the two symbols as mentioned here.

    Maybe it’ll help someone.

    Thanks a lot

    /* contact form 7 - responses */
.wpcf7 form.invalid .wpcf7-response-output {
color: #D8000C;
background-color: #FFBABA;
border: 0;
padding: 10px;
}
.wpcf7 form.sent .wpcf7-response-output {
color: #4F8A10;
background-color: #DFF2BF;
border: 0;
padding: 10px;
}
.wpcf7 form.sent .wpcf7-response-output:before,
.wpcf7 form.invalid div.wpcf7-response-output:before {
margin-right: 16px;
vertical-align: middle;
font-size: 2em;
}
.wpcf7 form.sent div.wpcf7-response-output:before {
content: "✔";
}
.wpcf7 form.invalid div.wpcf7-response-output:before {
content: "✘";
}
    Reply ↓
    Yair

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]