[How to] Add Inline Form Error Messages

#1

Few things kill conversions more than making it difficult or unpleasant for a user to complete a form. For this reason, we’re introducing a cleaner, less obtrusive experience for users to validate their forms with Inline Error Messages. With Inline Error Messages, you can automatically display errors inline, making it easier to find for users, and a much better experience on mobile.

Best practices for form validation are as follows:

  1. Display at the right place: Next to the input in question
  2. Display at the right time of informing about problems/success
  3. Use the right colour: Red for problems green for success
  4. Use clear language: Have a conversation with the user

   


You can see this in action (built in Unbounce) here:
http://landingpage.noahmatsell.ca/inline-error-message/


How to Install in Unbounce

Click Here for Instructions

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


Step 1.

Create your form and add some required fields or fields with validation.

Step 2.

Copy this script and paste it in Javacripts section with placement ‘Before Body End Tag’:

<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.prototype.closest.call(element, 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) {
      var input = event.target;
      setTimeout(function() {
        if (input.validity.valid) {
          closest(input, '.lp-pom-form-field').classList.remove('hasError');
        }

        updateErrorMessage(event.target);
      });
    }

    function handleInvalid(event) {
      event.preventDefault();
      var input = event.target;
      closest(input, '.lp-pom-form-field').classList.add('hasError');
      updateErrorMessage(input);
      if (!document.activeElement || document.activeElement instanceof HTMLButtonElement) {
        input.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>

Step 3.

Copy this script and paste in Stylesheets section:

<style>
  .errorSpan {
    display: none;
  }

  .hasError .errorSpan {
    display: block;
    color: red;
    font-family: inherit;
    position: absolute;
    bottom: -20px;
    right: 0px;
    font-size: 0.85em;
  }

  .hasError input,
  .hasError textarea,
  .hasError select {
    border: 1px solid red !important;
  }
</style>


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

8 Likes
Inline form errors internet explorer
The Master List of Unbounce Tips, Scripts & Hacks
Hey guys, I need help with creating a snippet of code!
[How To] Add A Multi-Step Form 2.0
:point_right: Important Update About Horizontal Forms :point_left:
Inline error validation on CTA click
Form not complete
Removal of Jquery Dependency [follow-up]
#2

@Noah Thank you so much!! Consider adding smooth scroll to top error - especially useful on mobile!

Edit: @Noah there are some bugs with the script and if you want to fix them I’d be more than happy to help you debug it by showing you exactly when they happen. PM or email to get this going if you want to.

2 Likes
#3

I’ve made a small update to resolve an Internet Explorer issue. Get the latest script here: https://gist.github.com/noahub/6e25e67b648fb6926e8d808a89619997.

Also, something I didn’t mention is that these error messages are fully customizable with the CSS provided. To add/change styling for the error text, you’ll want to modify the errorSpan class. For the form field styling, modify the hasError class. Hope this helps :slight_smile:

#4

@Noah I’m playing around with this and the one piece I can’t seem to replicate is the “shake” when the form is not submitted correctly. Could you share that bit of JS with us as well? Pretty please :slight_smile:

Joe

2 Likes
#5

Is there a way to add positive validation? For example, if they click outside the field by accident then click inside the field, enter the data, can it change to a positive validation after they finish typing? I noticed the error didn’t go away until I clicked outside of the field.

#6

Hi there,

We add the script to our landing page. We found a problem.
I have 5 Fields and 11 hidden fields. When I just let the 5 fields in my form the script works perfecty.
However when I add my hidden fields is working half.
Clicking on the CTA doesn’t show the errors fields, I need to click in each field to show the error message.

There is my page including hidden field : http://landing.oxatis.com/ecommerce-rdv/

Someone resolved this problem ?

#7

is anyone having trouble with the script working for mobile users?

#8

I’m having issues on mobile. The errors only appear when you press just below or above the submit button on mobile, not directly on it.

@Noah any thoughts on this?

EDIT: I can see you don’t have this issue in your example so I’ll persist with trying to fix it.

1 Like
#9

Hey guys, @Noah @Rodolphe_Ricard or anyone else, did you manage to find a solution to the CTA issue?
Is there a way to click CTA and see the errors?

Thanks!