Contact Form 7
[resolved] Contact form 7 - Validation positioning (4 posts)

  1. Reymus
    Posted 5 years ago #


    I have recently started using CF7, and I have managed to get everything working/looking how it should, a part from one thing, which is the validation fields. These are the fields that appear when you enter incorrect details and are then highlighted with a red border. On my form, the validation field appears over the input boxes and I am having trouble trying to position it. Does anyone know where I can find this so that I can apply a style to it?

    This is an example of what I am talking about:

    Note: That white box with the red border only appears when you enter incorrect details, but I can't find anyway of trying to style it!

    Help with this would be appreciated.

  2. tuplet
    Posted 5 years ago #

    I got the same problem.
    I'll get back to you if I find a solution :)

  3. tuplet
    Posted 5 years ago #

    The name of the style class is "span.wpcf7-not-valid-tip" and you'll find it in the styles.css.
    What I did was removing the left, top and position styles and inserted float:left; and clear:both;. I did the same on each form class and the "wpcf7-response-output" class to make the output box float as well.

    This solved my problem :)

    Good luck mate

  4. buried alive
    Posted 4 years ago #

    Thanks mate... I was looking for this solution. :) but do u know, how can we lift the validation display message (Validation errors occurred. Please confirm the fields and submit it again.) on top of the page ? Thanks...

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