Contact Form 7
[resolved] How to style the [response] messages (4 posts)

  1. kuran
    Posted 3 years ago #

    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!


  2. kuran
    Posted 3 years ago #

    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.

  3. Takayuki Miyoshi
    Plugin Author

    Posted 3 years ago #

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

  4. kuran
    Posted 3 years ago #

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

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