https://legacy.forums.gravityhelp.com/topic/styling-validation-error-messages-1 Gravity Support Forums Topic: Styling Validation Error Messages en-US Sun, 19 Apr 2026 23:30:15 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/styling-validation-error-messages-1#post-238318 Sun, 05 May 2013 09:45:05 +0000 Kevin Flahaut 238318@https://legacy.forums.gravityhelp.com/ <p>This is essentially the same issue as addressed here.. same layout, albeit a different site.</p> <p><a href="http://www.gravityhelp.com/forums/topic/styling-validation-error-messages" rel="nofollow">http://www.gravityhelp.com/forums/topic/styling-validation-error-messages</a></p> <p>To avoid duplication of efforts, I'm closing this topic for now and we can continue on the other thread. </p> https://legacy.forums.gravityhelp.com/topic/styling-validation-error-messages-1#post-235797 Fri, 03 May 2013 19:22:46 +0000 Phormosa 235797@https://legacy.forums.gravityhelp.com/ <p>Thanks! I'll give it a try </p> https://legacy.forums.gravityhelp.com/topic/styling-validation-error-messages-1#post-235730 Fri, 03 May 2013 18:26:29 +0000 Steve Napierski 235730@https://legacy.forums.gravityhelp.com/ <p>You might want to try this:</p> <pre><code>#bottom-contact-form1 gform_wrapper li.gfield.gfield_error .gfield_description, #bottom-contact-form1 .gform_wrapper .validation_message, #bottom-contact-form1 .gform_wrapper .validation_error{ display:none; } #bottom-contact-form1 .gform_wrapper li.gfield.gfield_error{ background:none;margin:0 0 8px 0;padding:0;border:none; } #bottom-contact-form1 .gform_wrapper li.gfield.gfield_error.gfield_contains_required div.ginput_container { margin-top: 0; } #bottom-contact-form1 gform_wrapper li.gfield.gfield_error input{ border:red; background:#FFDFDF; }</code></pre> <p>This will instead of making the errored DIVs pink will hide error descriptions will make the errored input field themselves pink with a red border.</p> <p>Seeing as I do not have access to your actually stylesheet, I was testing these styles using the Chrome Developers tool. You still might need to adjust the padding and margins accordingly to make it work, but it should be pretty close.</p> <p>Hope this answers your question. </p> https://legacy.forums.gravityhelp.com/topic/styling-validation-error-messages-1#post-235475 Fri, 03 May 2013 14:00:16 +0000 Phormosa 235475@https://legacy.forums.gravityhelp.com/ <p>I'm having a hard time styling the validation error messages - I've adjusted the positioning for the various inputs/fields for the form, and it looks great when there's no errors. But when there are, the whole thing just looks totally wrong with various fields just going completely out of alignment when the errors pop up. Here's some css targeting that I've done that hasn't worked (gravity-last-name is a custom class and the positioning values are exaggerated for testing purposes): </p> <pre><code>.gravity-last-name .validation_error { position:relative; padding: 0px; margin: 0px; width: 140px; top: -300px !important; } #field_2_10 .gfield_error { position:relative; padding: 0px; margin: 0px; width: 140px; left: -300px !important; top: -500px !important; } 18 .gfield_error .validation_message .gravity-last-name { position: relative; top: 100px; }</code></pre> <p>You can see the form at the bottom of the page: <a href="http://wearetuners.com/" rel="nofollow">http://wearetuners.com/</a></p> <p>Thank you! </p>