I've been unable to find a way to change the default style of validation errors: a huge box that surrounds the indicated field. I can change details like color, but not the overall style.
I'd like to replace the huge box with a small box that only shows below the field in question, not all around it, with the error message text inside.
Is this possible?
Thank you!
Richard Vav
Administrator
Hi, you can't actually replace the huge error box because that box is actually the li that contains the field label, inputs and description, it just has extra styles applied when validation fails so what you will have to do is override those extra styles so it doesn't look any different than the normal li, add the following to your themes main or custom stylesheet.
body .gform_wrapper .gform_body .gform_fields .gfield_error{background:#fff;border:0;margin:0 !important;padding:0 !important}Now that the li error styles are looking like a standard li again you can now style the error message, again add the following css to your stylesheet, you can change the border, background color, width, padding and margins to whatever gets the appearance you are looking for.
body .gform_wrapper .gform_body .gform_fields .gfield_error .validation_message {border:1px solid red;background-color:#f9d400;width:50%}If you also want to style the main error message that appears at the top of the form you would add and modify the following
body .gform_wrapper .validation_error{margin-top:10px;padding:5px;background-color:#f9d400;border:1px solid #c89797}Hope this helps
This helps perfectly, thank you. Loving Gravity Forms!
Thank you very much for the piece of code Richard!
To remove the top error message one can add a display:none. The below code is what Richard suggested (I am not using the first li code though, as I have not seen a reason yet why to use it) and I then added a display: none to it. From my tests it seems to work fine.
/* Error message on the top */
body .gform_wrapper .validation_error{
margin-top:10px;
padding:5px;
background-color:#f9d400;
border:1px solid #c89797;
display: none;
}
/* Validation errors that comes up by each field */
body .gform_wrapper .gform_body .gform_fields .gfield_error .validation_message {
border:1px solid red;
background-color:#f9d400;
width:50%;
}