Customized Form Error Messages

  • Question
  • Updated 9 months ago
  • Answered
Hi, can I customize the form error messages when it's required to fill that particular field? I mean, now I can customize the thank you page, the fields languages and so on, but the error messages I couldn't quite find it yet. Can you help me? Thanks!
Photo of Rui Nunes

Rui Nunes

  • 124 Points 100 badge 2x thumb
  • silly

Posted 4 years ago

  • 5
Photo of Ryan Engley

Ryan Engley, Customer Success

  • 4,384 Points 4k badge 2x thumb
Official Response
You can customize the error messages using a bit of javascript.

The following example assumes there is form with fields labeled "First Name", "Last Name" and "Email" and that all fields have "required" checked of and that the Email field should be a validated as a properly formed email address. The reference to each field is in lower case and spaces are replaced by underscore characters. (i.e. First Name becomes first_name). This can be seen in the form editor for each field label just below the text input field for the label name.

The following example should be pasted into the Javascript dialog box that is available after clicking on the Scripts tab on the lower border of the editor.

The "Placement" should be set to "Head"

<script type="text/javascript">

var d = window.module.lp.form.data;
/* Change the main error message title */
jQuery(document).ready(function() {
jQuery('#'+d.errorContainerId).find('.error').text(
"Please correct the following errors:"
);
});
/* Change the individual error messages */
d.validationMessages = {
"first_name": {
required: "First name is required"
},
"last_name": {
required: "Last name is required"
},
"email": {
required: "Email is required",
email: "Please enter a valid email address"
}
};
</script>



If you try this out and have any questions, just let us know by emailing support@unbounce.com