Web & Software Developer

Style The Response Messages For Contact Form 7

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;
        display: none;
        border: 0;
        padding: 10px;
    }
    .wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
        color: #4F8A10;
        background-color: #DFF2BF;
        display: none;
        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.

If you like these message boxes, you may also want to see these: Error, Success, Warning, and Info Messages with CSS.

By

We've 6 Responses

  1. 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

    avatar

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]