https://legacy.forums.gravityhelp.com/topic/how-do-we-style-validation-errors Gravity Support Forums Topic: How do we style validation errors? en-US Sun, 19 Apr 2026 23:22:05 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/how-do-we-style-validation-errors#post-28547 Sat, 25 Jun 2011 10:30:43 +0000 jackbarham 28547@https://legacy.forums.gravityhelp.com/ <p>Awesome, thank you - Easy when you know how :) </p> https://legacy.forums.gravityhelp.com/topic/how-do-we-style-validation-errors#post-28018 Fri, 17 Jun 2011 11:26:12 +0000 Kevin Flahaut 28018@https://legacy.forums.gravityhelp.com/ <p>You want to add a red border to the entire form if there is an error? Not just the required inputs..?</p> <p>If so, you would do that like this. You would want to apply this to an individual form an not to all of them I'm sure. Just replace the XX in the example below with your actual form ID.</p> <pre><code>[css] body #gform_wrapper_XX.gform_validation_error { border: 2px solid red; padding: 10px; }</code></pre> <p>screenshot: <a href="http://grab.by/anqG" rel="nofollow">http://grab.by/anqG</a> </p> https://legacy.forums.gravityhelp.com/topic/how-do-we-style-validation-errors#post-28015 Fri, 17 Jun 2011 11:14:21 +0000 jackbarham 28015@https://legacy.forums.gravityhelp.com/ <p>Thank you for replying back to my query - I was able to hide the error message and also change the colour, however I was hoping to change the form colour itself.</p> <p>Say for instance the form/input border is grey - When there is an error I would like to change the border colour to red.</p> <p>This allows the user to see there is an error without having to display an error message ..?</p> <p>Thanks again - J </p> https://legacy.forums.gravityhelp.com/topic/how-do-we-style-validation-errors#post-28013 Fri, 17 Jun 2011 11:10:39 +0000 Kevin Flahaut 28013@https://legacy.forums.gravityhelp.com/ <p>You can change the validation error message using a filter but you can't remove it completely. You can use CSS to hide it if you prefer it not to be visible.</p> <p><a href="http://www.gravityhelp.com/documentation/page/Gform_validation_message" rel="nofollow">http://www.gravityhelp.com/documentation/page/Gform_validation_message</a></p> <p>Assuming you're talking about changing the color for the validation error, yes you would simply target the input this way.</p> <pre><code>[css] body .gform_wrapper .gfield_error input { border: 1px solid #790000; color: red; font-size: 1.5em; font-weight: bold; }</code></pre> <p>screenshot: <a href="http://grab.by/anpR" rel="nofollow">http://grab.by/anpR</a></p> <p><a href="http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples#Validation_Errors" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples#Validation_Errors</a> </p> https://legacy.forums.gravityhelp.com/topic/how-do-we-style-validation-errors#post-28009 Fri, 17 Jun 2011 09:44:02 +0000 jackbarham 28009@https://legacy.forums.gravityhelp.com/ <p>Is it possible to remove the error message and have the form input display a different colour at all ..? </p> https://legacy.forums.gravityhelp.com/topic/how-do-we-style-validation-errors#post-13182 Tue, 23 Nov 2010 11:42:06 +0000 Kevin Flahaut 13182@https://legacy.forums.gravityhelp.com/ <p>I've removed some of the rules in the new v1.5 forms.css file to make it easier to style/override the validation styles.</p> <p>You should be able to do this with better specificity even in the current version. Better specificity will override !important declarations.</p> <pre><code>body .gform_wrapper .gform_body ul.gform_fields li.gfield_error { border:1px solid #f80 background-color:#f7941d!important } body .gform_wrapper .gform_body ul.gform_fields li.gfield_error label, body .gform_wrapper .gform_body ul.gform_fields li.gfield_error div.validation_message { color:#0076a3!important }</code></pre> <p><a href="http://grab.by/7xGy" rel="nofollow">Test Screenshot - Version 1.4.5</a> </p> https://legacy.forums.gravityhelp.com/topic/how-do-we-style-validation-errors#post-13181 Tue, 23 Nov 2010 11:20:20 +0000 inigomedia 13181@https://legacy.forums.gravityhelp.com/ <p>Unfortunately we can't - it's just a standard form though, no custom classes set, etc.</p> <p>We added the aforementioned classes such as validation_error to the CSS file of the theme, but they're being overruled by the plugin's internal CSS files.</p> <p>It would be great to see the ability when creating the form to control the classes used on the errors, or indeed to edit the CSS relevant to them directly in the plugin. In the meantime we've just turned off the CSS style output in the plugin settings. </p> https://legacy.forums.gravityhelp.com/topic/how-do-we-style-validation-errors#post-13179 Tue, 23 Nov 2010 10:37:05 +0000 Kevin Flahaut 13179@https://legacy.forums.gravityhelp.com/ <p>Can you post a URL to your form? I'll be happy to take a look and make suggestions. </p> https://legacy.forums.gravityhelp.com/topic/how-do-we-style-validation-errors#post-13178 Tue, 23 Nov 2010 10:32:17 +0000 inigomedia 13178@https://legacy.forums.gravityhelp.com/ <p>Hi,</p> <p>We've added styles for text colour on gform_wrapper, and colour / text size adjustments on gfield_error, validation_error and validation_message to our theme's style.css file, but these are being overruled by the default error styling.</p> <p>Even adding !important to each item hasn't helped. We don't want to edit the plugin's own CSS files as these will break with any update to the plugin. Any ideas? </p>