Styling Validation Error Messages « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Phormosa
Member
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):
```
.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;
}
```
You can see the form at the bottom of the page: http://wearetuners.com/

Thank you!
Posted 10 years ago on Friday May 3, 2013 | Permalink

You might want to try this:

#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;
}

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.

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.

Hope this answers your question.

Posted 10 years ago on Friday May 3, 2013 | Permalink

Phormosa
Member

Thanks! I'll give it a try

Posted 10 years ago on Friday May 3, 2013 | Permalink
Kevin Flahaut
Administrator

This is essentially the same issue as addressed here.. same layout, albeit a different site.

http://www.gravityhelp.com/forums/topic/styling-validation-error-messages

To avoid duplication of efforts, I'm closing this topic for now and we can continue on the other thread.

Posted 10 years ago on Sunday May 5, 2013 | Permalink

This topic has been resolved and has been closed to new replies.