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? 

To disable the Highligh effect

1. In the Form Builder, go to the Settings tab.
2. Click the Show More Options button.

3. Scroll down and find the Highlight Effect option.
4. Click on Dropdown selection and set it as 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 right side of the page.

2. Click the Advanced Designer button at the bottom part to load your form into the Advanced Designer page.

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.

When you click the gear icon right beside the Simulate Error Checkbox, you’ll be redirected to choose from four of our error state templates. After selecting your preferred style, please don’t forget to click the Save button to save your changes.

You can view our demo form here.