Change Required Fields Validation Color

You can change the colour using by adding some CSS via the Styles button in the toolbar. The CSS currently applies to the form validation errors HTML is as follows:

.lp-form-errors {
position:absolute;
display:none;
z-index:999999;
}

.lp-form-errors div.content {
border:1px solid #661414;
background-color:#ccc;
font-family:‘helvetica’, ‘arial’, ‘verdana’, ‘san serif’;
}

.lp-form-errors div.content h3 {
background-color:#661414;
padding:8px;
font-size:14px;
line-height:18px;
font-weight:bold;
color:#f3d8d8;
}

.lp-form-errors div.content ul {
background-color:#f3d8d8;
padding:8px;
font-size:14px;
line-height:16px;
font-weight:normal;
color:#661414;
}

.lp-form-errors div.content li {
list-style:square;
margin-left:20px;
margin-bottom:8px;
}

So if, for example, you wanted to make the header background black you would add something like this in the Styles Dialog:

.lp-form-errors div.content h3 {
background-color:#000;
}

The positioning is a bit more difficult because it is positioned dynamically depending on the width of the page and the position and size of your form. If you continue to have problems with the position can you send an email to support@unbounce.com with a link to your page and perhaps a screen shot of what you are seeing? That will help us troubleshoot any issue more effectively.

thanks

Justin

thank you so much! I will try this out!!!

Hi Simon - The text on the form error messages can be changed with a little custom javascript. Check out our support article below for detailed instructions:

http://support.unbounce.com/entries/2…

Hi Florian - we just did a pretty major update to our documentation–unfortunately, some of the redirects to the new articles aren’t working properly though. You can find the info on changing the form validation error text here now: http://documentation.unbounce.com/hc/en-us/articles/203799174-Adding-and-Editing-Form-Fields#content…