Managing Field Error States and Highlight Effect

December 6, 2023

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

jotform-form-highlight-effect
A subtle change in the background color of a field that receives focus

Error State

jotform-form-error-effect
Attention-grabbing error message with a red background

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

Notes

  • We have a new default theme in the Form Builder. The highlight and error state for the new default theme are a little different from the old one. We’ve prepared this guide for the old default theme. If you need help with the new default theme, kindly reach us through our support center.
  • 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 a warning to visually notify them what’s wrong, confusion will likely happen, leading to a low form completion rate.
Youtube Embed Poster: eFU06GktT5M

How to Disable the Highlight Effect? 

  1. In the Form Builder, click Settings at the top.
  2. Click the Show More Options button.
jotform-form-builder-settings-show-more-options
  1. You have to scroll down, search for the Highlight Effect option and set it to Disabled.
jotform-form-builder-highlight-effect-settings

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:

jotform-form-error-with-red-border

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.
jotform-form-builder-advanced-designer-button
  1. Under the Color Scheme section of the Advanced Designer, tick the Simulate Highlight option.
  2. Click the corresponding gear icon to its right to see your customization options.
jotform-advanced-designer-simulate-highlight
  1. 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.

jotform-advanced-designer-simulate-error

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.

jotform-advanced-designer-error-styles

You can view our demo form here.

Academy Logo

Introduction to Form Building

General Form Settings

Go to course :General Form Settings
lesson-2 - image
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • Director Don - Profile picture