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!
Customized Form Error Messages
Hi Rui,
It is not currently possible to customize the form error messages using the user interface of the form editor. We do plan on adding that feature in the future.
In the meantime it is possible to write some custom Javascript to customize the error messages. 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 Manage Scripts dialog box that is available after clicking on the Scripts button in the editor toolbar. The “Placement” should be set to “Head”
Here is the script example:
\<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('h3').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 need any more assistance with this email support@unbounce.com and indicate which page you would lie to customize the error messages for.
Justin
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”
If you try this out and have any questions, just let us know by emailing support@unbounce.com
It would also be great to change the colors of the error msg!
Userlevel 6
+4
I was able to change the individual error messages, but the main error message title remained the same. Is this a known bug?
Userlevel 6
+4
I am not able to get the custom form error messages to work. Have you changed the script?
Please help!
Id like to change the colors as well - how to do this? the current palette does not match my style…
Thanks, worked perfectly.
Userlevel 6
+4
Hi Nattalie,
I figured out how to add the styling of the error message. See my sample here
.lp-form-errors div.content {
border:0px solid #dedede;
background-color:#ccc;
font-family: ‘Open Sans’, arial, “san serif”;
}
.lp-form-errors div.content div.error {
background-color: #cc0000;
padding:8px;
font-size:14px;
line-height:18px;
font-weight:bold;
color: #fff;
}
.lp-form-errors div.content ul {
background-color: #dedede;
padding:8px;
font-size:14px;
line-height:16px;
font-weight:normal;
color: #000;
}
I used the script and the individual error message changes, but “Please correct the following errors” will not change. Has the script changed?
Hey Michael - there were two scripts listed above: one from Justin (now deprecated) and the one I posted.
I removed Justin’s answer to avoid any future confusion but as long as you’re using the script in my answer, you should be all good.
Double check but if you continue to run into any issues, let me know and I can have a look at your page.
Doesn’t work. I’ll email you with the page
I try to insert the script. All it’s ok but the error message appear just on the form fields and I need to reload the page to refill correctly the form. I need to note that my form has 4 fields on two columns.
Maybe you have a solution to change the place of the error message ?
Hi Finge, where i can paste this code ? Between Head ?
Userlevel 6
+4
Hi Felize, you need to add this as a custom CSS. You also need to start the css with and end with .
Hi Noemie,
I’m interested to see how your error forms are displaying. Would you be able to provide a screenshot? Alternatively, you can email me directly and I can take a peek into it for you. jveenema (at) unbounce (dot) com.
Hi Noemie,
I’m interested to see how your error forms are displaying. Would you be able to provide a screenshot? Alternatively, you can email me directly and I can take a peek into it for you. jveenema (at) unbounce (dot) com.
Hi Ryan, I don’t see your two scripts. Can you please email it to me?
Hi,
im trying to style my error message box. The embedded form is from Zoho.
<!-- Note :
- You can modify the font style and form style to suit your website.
- Code lines with comments Do not remove this code are required for the form to work properly, make sure that you do not remove these lines of code.
- The Mandatory check script can modified as to suit your business needs.
- It is important that you test the modified form before going live.–>
<!-- Line 25 previously width: 100%; -->
Any help will be greatly appreciated. Thanks
Reply
Log in to the Unbounce Community
No account yet? Create an account
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.