CSS Style Sheet esp. for Error Message


I only want to change the style of the pre code Error Messages nothing else …
Does anyone now where I can get a class, id or whatsoever to achieve this?


I think the in-line errors were recently updated so I am not too sure if this is actually still the relevant CSS.

In any case, this is a response from one of the Unbounce Experts and it includes the class/id’s for form errors.


Well, I think it all works with a JavaScript so it’s hard to find the classes … I recently got this (which works with a lot of JS):

/*Error text styling*/ .errorSpan{ color: #fff; float: right; font-family: inherit; position: absolute; bottom: -20px; right: 0px; font-size: .85em; } /*Error field styling */ .hasError{ border: 1px solid red !important; background: #ffc4c4 !important; } .hide{ display:none; } .lp-form-errors{ display: none !important; }

Hi @RafaelReyeros, welcome to the community :slightly_smiling_face:

As @Kyle.C pointed out there has been som changes, so the css needed a fix. This is how I styled my inline errors.

For that you need this script and css

  .errorSpan {
    display: none;
  .hasError .errorSpan {
    display: block;
    color: #717a8a;
    position: absolute;
    right: 0px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    z-index: 10;
    right: 10px;
    bottom: 10px;
    height: 30px;
    font-size: 11px;
    line-height: 29px;
    -khtml-border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: #ffefa6;
    border: 1px solid #ffde4d;
    padding: 0 15px;
  .hasError input,
  .hasError textarea,
  .hasError select {
    border: 2px solid red !important;

  (function() {
    function matches(element, selector) {
      return (
        Element.prototype.matches ||
        Element.prototype.msMatchesSelector ||
      ).call(element, selector);
    function closest(element, selector) {
      if (Element.prototype.closest) {
        return element.closest(selector);
      if (matches(element, selector)) {
        return element;
      if (element.parentElement) {
        return closest(element.parentElement, selector);
      return null;
    function updateErrorMessage(inputElement) {
      var container = closest(inputElement, '.lp-pom-form-field');
      var errorSpan = container.querySelector('.errorSpan');
      if (!errorSpan) {
        errorSpan = document.createElement('span');
      errorSpan.textContent = inputElement.validationMessage;
    function handleInput(event) {
      setTimeout(function() {
        if (event.target.validity.valid) {
          closest(event.target, '.lp-pom-form-field').classList.remove('hasError');
    function handleInvalid(event) {
      closest(event.target, '.lp-pom-form-field').classList.add('hasError');
      if (!document.activeElement || document.activeElement instanceof HTMLButtonElement) {
    var form = document.querySelector('.lp-pom-form form');
    form.addEventListener('input', handleInput);
    form.addEventListener('change', handleInput);
    form.addEventListener('invalid', handleInvalid, true);
   * Do not remove this section; it allows our team to troubleshoot and track feature adoption.
   * TS:0002-03-080
1 Like