Customizable Error Message


#1

Hi all!

I am currently experiencing an issue related to the error message that pops out when users try to send the form without filling all the required fields. I want to change the messages (write them in italian) and also the color of the box, that definitely doesn’t suit my landing pages. I’ve tried to use this script but it didn’t work at all (before you ask, I changed every voice using the IDs of my forms, let’s say I followed the book).

Any suggestion?

Thanks!

Andrea


#2

This sounds like a question for @Hristian … or maybe other @Unbounce-Experts?


#3

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.


#4

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(!n[e])return;n[e].required=t;if(i&&r[e].email)n[e].email=i;if(i&&r[e].phone)n[e].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>