Support » Plugin: Contact Form 7 » Styling 'Please fill the required field.' messages?

  • Resolved StefanRisticDev

    (@stefanristicdev)


    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:

    .wpcf7-not-valid-tip{
    	display:none;
    }

    but this doesn’t work:

    .wpcf7-not-valid-tip{
    	border: 1px solid yellow;
    }

    Thanks!

    http://wordpress.org/plugins/contact-form-7/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Hi!

    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.

    Thank you for your answer bxwebber!

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

    span.wpcf7-not-valid-tip

    Issue solved, thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Styling 'Please fill the required field.' messages?’ is closed to new replies.