Web & Software Developer

Style The Response Messages For Contact Form 7

This CSS will style the “Validation errors” message box and the “Your message was sent” message from Contact Form 7 (a WordPress plugin). It 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' ); ?>

The CSS:

.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 dashicons;
    margin-right: 16px;
    vertical-align: middle;
}
div.wpcf7-mail-sent-ok:before {
    content: "\f147";
}
div.wpcf7-validation-errors:before {
    content: "\f158";
}

By

We've One Response

  1. thnk you so much working

    January 3rd, 2017 at 2:21 pm

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]