Title: Error Message Styling
Last modified: December 28, 2020

---

# Error Message Styling

 *  [marshallpickard](https://wordpress.org/support/users/marshallpickard/)
 * (@marshallpickard)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/error-message-styling-2/)
 * I am trying to have a red “X” appear before the main error message and a green“
   Check mark” for a successfully submitted form.
 * I am using font awesome icons, but they are not appearing. Here is the CSS
 * /* Form Errors */
    span .wpcf7-not-valid { border: 2px solid #CE0000 !important;}
 * span .wpcf7-checkbox-not-valid
    { border: 2px solid #CE0000 !important;
 * }
 * span.wpcf7-not-valid-tip {
    display: none !important; }
 *  .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-
   output {
    color: #CE0000; background-color: #F8F8F8; border: 2px solid #CE0000!
   important; 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-family: “FontAwesome” !important; margin-
   right: 16px; vertical-align: middle; } div.wpcf7-mail-sent-ok:before { content:”\
   f00c” !important;
 * }
    div.wpcf7-validation-errors:before { content: “\f057” !important;
 * }
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ferror-message-styling-2%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  [Yordan Soares](https://wordpress.org/support/users/yordansoares/)
 * (@yordansoares)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/error-message-styling-2/#post-13870529)
 * Hello [@marshallpickard](https://wordpress.org/support/users/marshallpickard/),
 * This question it’s an advanced customization you want to apply to your form, 
   which is outside the scope of the plugin support forum.
 * However, you can read [Styling contact form](https://contactform7.com/styling-contact-form/)
   to learn more.
 * Best regards,
    Yordan.

Viewing 1 replies (of 1 total)

The topic ‘Error Message Styling’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

## Tags

 * [error message](https://wordpress.org/support/topic-tag/error-message/)
 * [icons](https://wordpress.org/support/topic-tag/icons/)

 * 1 reply
 * 2 participants
 * Last reply from: [Yordan Soares](https://wordpress.org/support/users/yordansoares/)
 * Last activity: [5 years, 5 months ago](https://wordpress.org/support/topic/error-message-styling-2/#post-13870529)
 * Status: not resolved