WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. StefanRisticDev
    Member
    Posted 6 months 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:

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

  2. bxwebber
    Member
    Posted 6 months ago #

    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.

  3. StefanRisticDev
    Member
    Posted 6 months ago #

    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!

Reply

You must log in to post.

About this Plugin

About this Topic