When a lightbox form is submitted and the website visitor has not provided input values for all of the required fields, it is important that you draw attention to these fields so that the from can completed and resubmitted. With Primer's Inline Error Messages feature, you can display custom error messages inside of required fields. The look and feel of these error messages can be customized according to your preferences.
Primer Webforms offers the ability to show the error in multiple places.
The three options are:
- top + inline
You can specify the custom error message that is displayed by going to the field and entering in the Error Text setting for each field:
If you don't enter anything for the Error Text setting, a generic error message such as "Email is required" will be displayed. You can choose a custom Error Background and Error Border on the inputs:
It is important to note that the error text color will be the same as the Error Border color that you choose. After an error message is displayed inline within a field, it will automatically be hidden once you click in the field. The field returns to its default color settings because it is assumed that the user is in the process of correcting the error.