Making error messages more friendly

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)?

Thanks & best

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 

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;

}

Hi Tethark. Thanks a lot.

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

Thanks.

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.

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