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


Here’s a link to the script:
https://gist.github.com/noahub/6e25e67b648fb6926e8d808a89619997

Step 1.

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

Step 2.

Copy the inline_errors.js script and paste it in Javascripts section with placement ‘Before Body End Tag’

Step 3.

Copy the inline_errors.css script and paste in Stylesheets section



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


Inline form errors internet explorer
[How To] Add A Multi-Step Form 2.0
The Ultimate List of Unbounce Tips, Scripts & Hacks
:point_right: Important Update About Horizontal Forms :point_left:
Hey guys, I need help with creating a snippet of code!
The Ultimate List of Unbounce Tips, Scripts & Hacks
#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.


#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


#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 ?