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):

Hi @RafaelReyeros, welcome to the community 🙂

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

<style>

  .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;

  }

</style>



<script>

  (function() {

    function matches(element, selector) {

      return (

        Element.prototype.matches ||

        Element.prototype.msMatchesSelector ||

        Element.prototype.webkitMatchesSelector

      ).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.classList.add('errorSpan');

        container.appendChild(errorSpan);

      }

      errorSpan.textContent = inputElement.validationMessage;

    }

    function handleInput(event) {

      setTimeout(function() {

        if (event.target.validity.valid) {

          closest(event.target, '.lp-pom-form-field').classList.remove('hasError');

        }

        updateErrorMessage(event.target);

      });

    }

    function handleInvalid(event) {

      event.preventDefault();

      closest(event.target, '.lp-pom-form-field').classList.add('hasError');

      updateErrorMessage(event.target);

      if (!document.activeElement || document.activeElement instanceof HTMLButtonElement) {

        event.target.focus();

      }

    }

    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

   */

</script>