When a visitor fills out the form on your page, but their form entry doesn't validate, they'll see some errors, which look like this by default:
You can modify and customize the wording of these errors by adding a snippet of Javascript to your landing page in the Classic Builder!
To add this script,
- Navigate to your page in the Classic Builder.
- Create your form, and keep note of the form field's custom IDs.
- To locate the ID, navigate back to the editor of your form.
- Under the Field Name and ID subheading, you'll find the ID of this field:
In this example, the ID is 'name'.
- Click the Javascripts
button in the bottom left of the Classic Unbounce Builder.
- Click + Add New JavaScript. A new dialog box will appear.
- Give your script a name, set the Placement to Before Body End Tag, and paste in the following code:
- Replace the light blue snippet of the code with your form field ID (as located in step 2).
- Customize the content within the quotation marks " " with your own form validation error messages.
- Adding '.required' at the end of each script (as shown on line 3), ensures that the validation error message will show even when a user attempts to submit a form with an empty field.
- Continue adding the corresponding form field ID to each validation message.
- Click the blue Done button at the bottom of the script dialog box.
- Be sure to Save and Publish your page.
Navigate to your live landing page to test this validation error message. Here's the result:
Note:
If you make any changes to the field ID in your form, be sure to update the form validations script as well.