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.
is there a way to change the size of the highlight field? For example, if I change the margin between two questions to be more narrow, then the highlight covers up text.
Can you therefore explain how to customise error state for a product field.
ERROR STATE
This article is completely wrong for product fields. There is NO simulate error state option at all.