Contact Form 7
[resolved] Styling 'Please fill the required field.' messages? (3 posts)

  1. StefanRisticDev
    Posted 2 years ago #

    Hello everybody!

    Any idea about how to style those 'Please fill the required field.' messages with the red border?

    I've tried using a .wpcf7-not-valid-tip class, but it's not working except for the display property. So, this works:


    but this doesn't work:

    	border: 1px solid yellow;



  2. bxwebber
    Posted 2 years ago #


    Maybe this can help (it worked for me):
    The original classes can be found in the plugin's stylesheet, which sits in the contact-form-7 plugin folder > includes > css > styles.css . Of course it's best to copy the ones you need into your child theme's stylesheet and change the values.

    My example (in which I changed the border- and background-colors):

    div.wpcf7-mail-sent-ok { border: 2px solid #87cefa !important;background-color:lightskyblue; }
    div.wpcf7-mail-sent-ng { border: 2px solid #87cefa !important;background-color:lightskyblue; }
    div.wpcf7-spam-blocked { background-color:#ffa500; }
    div.wpcf7-validation-errors { border:0;background-color:#f7e700; }

    The !important statement seems necessary to make it effective.

  3. StefanRisticDev
    Posted 2 years ago #

    Thank you for your answer bxwebber!

    Your tip about checking CF7 styles.css helped me to find the correct class. It should be:


    Issue solved, thank you!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic