This sounds like a question for @Hristian … or maybe other @Unbounce-Experts?
Hi @Andrea_Cappa! For custom error messages you can use this script from @Mark_Wainwright
I should be able to give you the CSS to alter the colors, but I would have to look that up tomorrow.
Ok, I think I found the CSS for changing the style of the error message. Add this to a stylesheet to your liking
/* Form errors */
.lp-form-errors div.content {
font-family: 'Roboto' !important;
font-size: 13px;
}
.lp-form-errors div.content div.error {
background-color: #cc0000;
padding:8px;
font-size:14px;
line-height:18px;
font-weight:bold;
color: #fff;
font-family: 'Roboto' !important;
}
I also found the script we use at ConversionLab to do custom error messages. See the last 4 lines in the script. The first value e.g. “name” has to be the same as your form field id.
<script type="text/javascript">
(function(e){function t(){var t=window.module.lp.form.data;var n=t.validationMessages;var r=t.validationRules;this.changeTitle=function(n){e(function(){e("#"+t.errorContainerId).find("div.error").text(n)})};this.changeField=function(e,t,i){if(!nfe])return;nre].required=t;if(i&&rme].email)nie].email=i;if(i&&rme].phone)nne].phone=i}}window.errors=new t(lp.jQuery)})(lp.jQuery)
// Change the title bar of the validation error box
errors.changeTitle("The following errors has to be fixed:");
// Change the error text for specific fields. The first message is shown when nothing is
// entered and the second is shown when an invalid email/phone number is entered.
errors.changeField("name", "Name is required");
errors.changeField("email", "Email is required", "Enter your valid email");
errors.changeField("phone", "Phone is required", "Enter a valid phone number");
errors.changeField("postalcode", "Postal code is required", "Enter a valid postal code");
</script>