Print
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.
I can easily change the highlight state and error state by clicking the gear to the right of "simulate error state," or "simulate highlight state."
My problem is the highlight color of transparency does not effect the PayPal widget. I'm using a black background and when the products in that widget are highlighted the white text cannot be seen.
I used this code but it still does not work on the widget:
.form-line-active {
background-color:transparent;
}
.form-line-error {
background:none repeat scroll 0 0;
}
I keep getting a "page unresponsive error" on my form. Can you help?
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.