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; the highlight effect and the error state.

Highlight Effect

Error State

You can disable these two or customize both to enhance their look in the form.

How to Disable the Highlight Effect? 

1. In the Form Builder, click Settings at the top.
2. Click the Show More Options button.

3. You have to scroll down, search for the Highlight Effect option and set it to Disabled.

How to Remove the Error State Messages?

If you prefer to disable them, you should at least leave a simple or subtle hint that a field needs the user’s attention if it throws an error. And for this, we would need to inject some custom CSS code 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 code above will remove the error state message and leave a simple red border on the field with the error. See the below image as an example:

How to Customize the Highlight Effect?

You can customize the highlight effect through the Advanced Designer. You can also customize it with custom CSS codes, and if you prefer this method, contact us through our support center for help.

1. In the Form Builder, click the Form Designer (paint roller) icon on the left side of the screen.
2. Scroll down and click the Advanced Designer button.

3. Under the Color Scheme section of the Advanced Designer, tick the Simulate Highlight option.
4. Click the corresponding gear icon to its right to see your customization options.

5. Lastly, don’t forget to click the Save button on the top-left side of the advanced designer to save your changes.

How to Customize the Error States?

You have to follow the same steps above, but this time, tick the Simulate Error State checkbox and its corresponding gear icon.

You can choose from four of our error state templates. After choosing your preferred style, please don’t forget to click the Save button to save your changes.

You can view our demo form here.