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

  1. 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;
    Posted 11 years ago on Thursday May 2, 2013 | Permalink
  2. 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. 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. 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. 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