Gravity Forms-CSS-Targeting specific fields upon validation

This post is a continuation of a brainstorming session with friends at the OC WordPress Group yesterday. Thanks Lucy Beer and Brad Bihun for pointing the way.

css_gravity-form-validation-field-specificity

If you’re positioning specific form fields to line up nicely, chances are you also want to address what happens when a field validation error displays. Here’s an example of how to target the individual elements of a field. In my example I use a field call “zip”. The form id in the example is 18. The code targets only a specific form, id_18. The element descriptions are verbose because, well, specificity avoids issues.

/* target whole zip field container (label and input). */
body #gform_wrapper_18 .gform_body .gform_fields #field_18_25.gfield.gfield_error {float:right; margin-right:-2px; margin-top:-78px; width:70px; border:2px yellow solid !important} /*zip label*/

/* just the zip input field not the label */
body #gform_wrapper_18 .gform_body .gform_fields #field_18_25.gfield.gfield_error input {float:right; margin-right:-2px; margin-top:-78px; width:70px;} /*zip input*/

/* just zip label not the input field */
body #gform_wrapper_18 .gform_body .gform_fields #field_18_25.gfield.gfield_error label {float:right; margin-right:-2px; margin-top:-78px; width:70px; border:2px yellow solid !important} /*zip label*/

Questions? Suggestions for improving the approach?

Leave a Reply