Support » Plugin: Contact Form 7 » [Plugin: Contact Form 7] How to style the [response] messages

  • Resolved kuran


    I’m very happy having found out about Contact Form 7, and have been able to style it pretty well so far.

    However I can’t figure out how to style all the elements of the [response] element.

    div.wpcf7-validation-errors is seemingly only for the output which tells you what is wrong with the form.

    But how do I style the red boxes that appear over the form fields to indicate the source of the error(s)?

    PS: I am using watermark on my fields, but this doesn’t seem to work with the CAPTCHA tag, as the watermark text simply gets treated as a default value.

    PPS: How do I style the selection color that appears around my form fields when clicked?

    Thanks for any help!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Is this talking about my subject?

    When I edit span.wpcf7-not-valid-tip, none of the changes are registered. Except for adding display:none to the CSS.

    Border color, text color, padding values are all ignored and I get a standard long, white error message overlay with red borders and no text inside.

    Plugin Author Takayuki Miyoshi


    Try div.wpcf7-response-output or div.wpcf7-mail-sent-ng.

    Thanks for the response Takayuki, I appreciate it!

    I think I figured out what went wrong, because I did not want to mess with the plugin’s default CSS (since I might want to use it with another future theme), I decided to copy the CSS values to my theme’s style.css document. This seemed to work with the one of the values I tested it with, but it was causing conflicts and my changes wouldn’t override the original styles.css.

    I hope that explanation makes sense.. 🙂

    I’ll change the thread to resolved as soon as I manage to style the error messages properly..

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Plugin: Contact Form 7] How to style the [response] messages’ is closed to new replies.