Title: Need Error-Produced CSS Class/es
Last modified: April 6, 2022

---

# Need Error-Produced CSS Class/es

 *  [redlineguiding](https://wordpress.org/support/users/redlineguiding/)
 * (@redlineguiding)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/need-error-produced-css-class-es/)
 * This is a hard to describe, and I have searched but to no avail. What I want 
   to do, I realize, while probably doable, may be a bit of a challenge. I’ll lay
   out the details:
 * The booking form I linked to I was able to create with the following Plugins:
   Contact Form 7, Collapse-O-Matic, Conditional Fields for Contact Form 7, Contact
   Form 7 External Shortcodes, Contact Form DB, Honeypot for Contact Form 7, and
   Newsletters – Contact Form 7 Subscribers.
 * This booking form has served me very well since 2016. Works great. No issues,
   though obviously there is some complexity in such a form. I do plan to move the
   form [response] soon placing it above the Submit button, but this isn’t related
   to that.
 * Note that now when the form is submitted the current error message appears below
   the form and it indicates that there is an error SOMEWHERE in the form (usually
   a missed required field), and that the “boxes” don’t reveal the error’s actual
   location inviting the user to go looking for it. What a pain. It could be so 
   much better, right?
 * Sure would be nice if the Collapse-o-Matic box, a DIV, could be styled IF an 
   error was located within said box/DIV. The solution needs to be a clever one.
 * So from this I know that each box’s div would 1) need to be added to that DIV-
   OR- 2) each box would need a different CSS class added on_error.
 * In the former scenario (1) the classes would have to be added to the DIV, using
   PHP I suppose, and that should be fine. I can run PHP on the pages of this site.
 * In the latter scenario (2) the form error residing within that box or DIV would
   need to produce a common class used in any of the boxes in which error-producing
   inputs were contained.
 * The desired result: The user hits Submit with, say, the required Name* input 
   in Step 1, and let’s say the Date/Date Range in Step 5, just as an example. As
   is the inputs themselves are highlight, but I’d also like to highlight the box
   or DIV in the corresponding steps.
 * I hope what I’m looking for is clear, and I hope I am able to get some viable
   suggestions. Thanks.
 * Mike
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fneed-error-produced-css-class-es%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

The topic ‘Need Error-Produced CSS Class/es’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

## Tags

 * [collapse-o-matic](https://wordpress.org/support/topic-tag/collapse-o-matic/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [errors](https://wordpress.org/support/topic-tag/errors/)
 * [onsubmit](https://wordpress.org/support/topic-tag/onsubmit/)
 * [styling](https://wordpress.org/support/topic-tag/styling/)

 * 0 replies
 * 1 participant
 * Last reply from: [redlineguiding](https://wordpress.org/support/users/redlineguiding/)
 * Last activity: [4 years, 2 months ago](https://wordpress.org/support/topic/need-error-produced-css-class-es/)
 * Status: not resolved