Managing Field Error States and Highlight Effect

All forms created in JotForm have two built-in features that most of you may be familiar with:

1. HIGHLIGHT EFFECT: The subtle change in the background color of a field that receives focus.

2. ERROR STATES: The attention-grabbing error message with a red background.

This article will guide you on how to disable or customize them but...

A word of advice before you proceed:

A visual warning / error state is a staple of Form Validation and something that shouldn't be disabled. Users need all the help they can get to be informed if they missed a field or incorrectly filled out one. Without a proper error or warning to visually inform them what's wrong, confusion is bound to happen which may lead to lower form completion rates.

A. How to disable the highlight effect? 🔗

Click SETTINGS at the top of your Form Builder > FORM SETTINGS on the left > click SHOW MORE OPTIONS > scroll all the way down to the bottom > then set HIGHLIGHT EFFECT to DISABLED.

B. How to remove the error state messages? 🔗

If you prefer to disable them, you should at least leave a simple/subtle hint that a field needs the user's attention in case it throws an error. And for this, we would need to inject some custom CSS codes to disable the form's error states.

.form-error-message {
  display: none;
}
.form-validation-error {
  box-shadow: none !important;
}
.form-line-error {
  background: none;
}

The codes above will remove the error state message and will leave a simple red border on the field with the error.

C. How to customize the highlight effect? 🔗

Now, if you wanted to change the color of the highlight effect, open the ADVANCED DESIGNER > go to the DESIGN tab > expand the COLOR SCHEME section > tick the SIMULATE HIGHLIGHT checkbox > then click the corresponding GEAR icon to see your customization options.

D. How to customize the error states? 🔗

Follow the same procedure above, only this time, tick the SIMULATE ERROR STATE checkbox and its corresponding GEAR option. The error state offers 4 templates to choose from.

Demo Form: https://www.jotform.com/71825058099970

Comments and suggestions are welcome below. If you have a question, post it in our Support Forum so we can assist you.