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.

Errors Styling Issue

  1. I've been unable to find a way to change the default style of validation errors: a huge box that surrounds the indicated field. I can change details like color, but not the overall style.

    I'd like to replace the huge box with a small box that only shows below the field in question, not all around it, with the error message text inside.

    Is this possible?

    Thank you!

    Posted 7 years ago on Saturday January 21, 2012 | Permalink
  2. Richard Vav
    Administrator

    Hi, you can't actually replace the huge error box because that box is actually the li that contains the field label, inputs and description, it just has extra styles applied when validation fails so what you will have to do is override those extra styles so it doesn't look any different than the normal li, add the following to your themes main or custom stylesheet.

    body .gform_wrapper .gform_body .gform_fields .gfield_error{background:#fff;border:0;margin:0 !important;padding:0 !important}

    Now that the li error styles are looking like a standard li again you can now style the error message, again add the following css to your stylesheet, you can change the border, background color, width, padding and margins to whatever gets the appearance you are looking for.

    body .gform_wrapper .gform_body .gform_fields .gfield_error .validation_message {border:1px solid red;background-color:#f9d400;width:50%}

    If you also want to style the main error message that appears at the top of the form you would add and modify the following

    body .gform_wrapper .validation_error{margin-top:10px;padding:5px;background-color:#f9d400;border:1px solid #c89797}

    Hope this helps

    Posted 7 years ago on Sunday January 22, 2012 | Permalink
  3. This helps perfectly, thank you. Loving Gravity Forms!

    Posted 7 years ago on Monday January 23, 2012 | Permalink
  4. Thank you very much for the piece of code Richard!

    To remove the top error message one can add a display:none. The below code is what Richard suggested (I am not using the first li code though, as I have not seen a reason yet why to use it) and I then added a display: none to it. From my tests it seems to work fine.

    /* Error message on the top */
    body .gform_wrapper .validation_error{
    	margin-top:10px;
    	padding:5px;
    	background-color:#f9d400;
    	border:1px solid #c89797;
    	display: none;
    }
    
    /* Validation errors that comes up by each field */
    body .gform_wrapper .gform_body .gform_fields .gfield_error .validation_message {
    	border:1px solid red;
    	background-color:#f9d400;
    	width:50%;
    }
    Posted 7 years ago on Tuesday June 12, 2012 | Permalink