Making error messages more friendly

  • Profile Image
    artel
    Asked on July 20, 2018 at 06:42 AM

    Hi there

    Thanks for your great support so far. We want to make error messages (when user misses to enter data in a mandatory field) more friendy.

    - We changed already the text. Is it possible to change also the color from aggressive red to friendly green (and the font color too)?

    - In a use of two language form, will it be possible to translate the error messages too?

    Thanks & best

  • Profile Image
    gizem
    Answered on July 20, 2018 at 11:55 AM

    Your first question will be answered here in a short time. I have split your second question to a new thread in order to prevent any possible confusion.

    Please follow it here: https://www.jotform.com/answers/1530479 

  • Profile Image
    Tethark
    Answered on July 20, 2018 at 12:04 PM

    Injecting css code below in your form would make your error messages look green. If injecting it to your code is troubling you, this may help.

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes


    .form-button-error{

        color: green !important;

    }

    .form-line-error .form-error-message{

      background-color: green !important;

    }

    .form-error-arrow{

      border-bottom-color: green !important;

    }

  • Profile Image
    artel
    Answered on August 06, 2018 at 06:41 PM

    Hi Tethark. Thanks a lot.

    Can you also provide the code to have the question marking light red fill in light green instead?153359519720180807 - Qestions Jotform -

    Thanks.

  • Profile Image
    artel
    Answered on August 06, 2018 at 06:44 PM

    And the red frame around the entry form also in a shade of green? Basically replacing all shades of red in the error incident with shades of green. Thanks.

  • Profile Image
    jonathan
    Answered on August 06, 2018 at 07:56 PM

    Please try this CSS codes


    .form-button-error{

        color: #5a8200 !important;

    }

    .form-error-message {

        background-color: #5a8200  !important;

    }

    .form-error-arrow {

        border-bottom-color: #5a8200  !important;

    }

    .form-line-error input, .form-line-error textarea {

        box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.45), 0px 0px 0px 3px #5a8200 , 0px 0px 0px 4px #5a8200  !important;

        -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.45), 0px 0px 0px 3px #5a8200 , 0px 0px 0px 4px #5a8200  !important;

        -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.45), 0px 0px 0px 3px #5a8200 , 0px 0px 0px 4px #5a8200  !important;

    }

    .form-line-error input:not(#coupon-input), .form-line-error select, .form-line-error textarea, .form-validation-error {

        border: 1px solid #5a8200 !important;

    }


    the result should be like this

    1533599751zzz 2018-08-07 07.52.36.png