Modifying Form Validation Error Messages in the Classic Builder


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,

  1. Navigate to your page in the Classic Builder. 
  2. Create your form, and keep note of the form field's custom IDs.
    1. To locate the ID, navigate back to the editor of your form. 
    2. Under the Field Name and ID subheading, you'll find the ID of this field:

      In this example, the ID is 'name'.
  3. Click the Javascripts javascriptsbutton.png button in the bottom left of the Classic Unbounce Builder.
  4. Click + Add New JavaScript. A new dialog box will appear.
  5. 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. 
  1. Continue adding the corresponding form field ID to each validation message. 
  2. Click the blue Done button at the bottom of the script dialog box. 
  3. Be sure to Save and Publish your page. 

Navigate to your live landing page to test this validation error message. Here's the result:



If you make any changes to the field ID in your form, be sure to update the form validations script as well.

Related Articles

Adding and Editing Forms in the Classic Builder