PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Styling Validation Error Messages

Gravity Support Forums » Plugin Support » Gravity Forms

  1. 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;

}

.gfield_error .validation_message .gravity-last-name {
	position: relative;
	top: 100px;
    Copy
    Posted 11 years ago on Thursday May 2, 2013 | Permalink

  2. Kevin Flahaut
    Administrator

    Can you post a URL to your form so we can check it out. It's a lot easier to offer some help if we can see the actual form. Thanks.

    Posted 11 years ago on Thursday May 2, 2013 | Permalink

  3. Phormosa
    Member

    Kevin,

    Thanks for the help. You can find the form at http://justrank.it/

    The form is at the very bottom. Just hit submit without filling anything out and you'll understand what's going on. Thanks!

    Posted 11 years ago on Thursday May 2, 2013 | Permalink

  4. Kevin Flahaut
    Administrator

    Hey, sorry, I did see this post but haven't had a chance to go back and research it thoroughly to give you some pointers. I'll do that asap but wanted to let you know I hadn't forgotten you. Thanks for your patience.

    Posted 11 years ago on Saturday May 4, 2013 | Permalink

  5. Kevin Flahaut
    Administrator

    Okay, the first thing I see is that the ready classes aren't being implemented correctly and I would bet that's causing most of your layout woes. The "left_half" and "right_half" classes are supposed to work together left+right and so on. You have left, right, left, left, left, left. I see what you're trying to do, but those classes are designed to create simple two column layouts where the fields are the same size.

    http://i.imgur.com/qWKPFdO.jpg

    What I would do is use the HTML blocks to add inline div "wrapper" elements and actually create 2 div "columns" to align your fields the way you want. It's going to be a tad more work building the form and CSS, but it's going to be more forgiving and bulletproof from a layout standpoint.

    Here's an example of what I'm talking about.

    http://www.gravityhelp.com/forums/topic/how-can-i-get-the-form-fieldsboxes-side-by-side#post-29425

    Once you get the layout sorted properly I think the validation styling shouldn't be a problem.. if anything, just may need some minor tweaking.

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