JotForm User Guide / How to Create Better Forms /

Managing Field Error States and Highlight Effect

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:

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

Send Comment


  • kristinrohrer

    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.

  • Dean Pitout

    Can you therefore explain how to customise error state for a product field.

  • Dean Pitout

    This article is completely wrong for product fields. There is NO simulate error state option at all.