×

Version 3.0

Version 3.0 login

If you signed up recently, or anytime after June 1st 2012, then your using Version 3.0. Login Below:

Login

Version 2.0

Version 2.0 login

If you signed up before June 1st 2012, and you haven't manually upgraded, then your using Version 2.0. Login Below:

Login
I want to upgrade to Version 3.0
×

Version 3.0

Version 3.0 login

If you signed up recently, or anytime after June 1st 2012, then your using Version 3.0. Login Below:

Login

Version 2.0

Version 2.0 login

If you signed up before June 1st 2012, and you haven't manually upgraded, then your using Version 2.0. Login Below:

Login


I want to upgrade to Version 3.0

How Form Validation can Make or Break Your Form

By .(JavaScript must be enabled to view this email address)
February 01, 2012

0 comments

Form Design

You would be amazed at the massive jump increase in conversion rates made possible by changing just this one thing. Improving a form's validation can have staggering results. Validation is one of those things that when done right is a powerful tool to help you collect the right information in the right format, but when done wrong, can have a serious effect on the number of leads,sales and submissions. Put simply, if you're not careful with form validation, it can very negatively affect your bottom line.

Provide Actionable & Specific Validation Errors

One of the most important aspects of validation errors is to always provide enough details to make it easy for the user to correct the problem. Imagine you've just filled out a long form and you hit submit only to be told "The value in the 'Home Phone' field is invalid". Ok. It's invalid. You take a look and you've entered "206 384 4671". Well, that looks right you think to yourself. Hmmm, maybe they expect hyphens. You change it to "206-384-4671" only to get the same error. Now you're starting to get frustrated and consider abandoning the form and finding somewhere else to do your business. You give it one last try and enter "2063844671" and hit submit... success! The error is gone! But you're left with a bit of a bad taste in your mouth. This type of vague error messages can hurt conversion rates in a big way.

The solution is really quite simply. Provide clear and considered validation messages that tell the user how to fix the problem. In this example, the error "Please enter your Home Phone in this format 7788383202 (10 digits with no spaces)" would have solved the problem on the first pass. But why wait for the user to hit submit before letting them know the value is invalid? Read on to find out how you can make the validation process even easier and improve your bottom line.

Inline & Real Time Validation Errors

In the above example, the user entered an invalid phone number and then continued filling out the form, got all the way to the bottom, and then hit submit only to be told there was an error way back up in the home phone field. They returned to the home phone field, re-entered a value, scrolled back down, hit submit, only to be told it was still invalid! This is where your users start to get frustrated, and the point at which they might abandon your form. You can avoid form abandonment and see completion rates skyrocket by using inline validation.

Inline validation simply refers to the process of showing an error right next to the field with the error in real time. So, in this example, as soon as the user enters a value and moves on to the next field, an error pops up and tells them (with an actionable and specific message) how to correct the value they have just entered. They correct it, and move on. Voila! One simple change and you've just saved your user plenty of time and frustration, and with that easily increased your conversion rates.

Unobtrusive Validation

When using inline & real time validation, care must be taken to make the validation unobtrusive. Over do it and your attempt at being helpful can get in the way and once again decrease your conversion rates. You don't want to start showing error messages about an invalid phone number the first time your user clicks into the home phone field and starts typing. As they typed "206" your validation errors should not start popping up! They haven't even finished entering their phone number. Only after they leave the field should the validation run. At that point, after a validation error and when the user returns to the field validation can run on key press, as the user is correcting the field. This enables you to change the error messages to a success messages AS SOON as they correct the problem. This is helpful as the user does not need to click outside of the field to check if the've corrected the error. logiforms does all of this automatically

Key Practices for Unobtrusive Inline Validation

  • Do not enforce required (not blank) validation until the first submission attempt. Often users jump around while filling out a form. You don't need to tell them about a missing field until after they click submit. Remember, using a red required astrix can help let a user know which fields are required
  • Enforce formatting validation when a user leaves a field and show an inline error message. When a user is correcting a validation error, validate on key press and immediately inform the user once they have corrected the error.
  • After the first submission attempt, validation on all fields should run on key press to let the user know validation errors have been corrected - in real time.

These best practices are examples of tiny nuances in form validation and how getting them wrong can result in poor performance for your form. When you design your forms is logiforms, all of these best practices are followed and help improve your conversion rates in a big way.

Form Validation Best Practices in Mind:

  • Reserve the color red for validation messages and alerts. Do not use red in your labels and text. Red is the universally recognized color of an error message and will help your users quickly find any errors
  • Validation error messages should describe exactly what the error is. Avoid vague error messages
  • Provide confirmation when a validation error is corrected
  • Communicate any formatting or out of bounds entries in real time (e.g if a user enters 1000 in a field that allows a maximum of 100, don't wait to show the error, show it inline, right away.)
  • When validating inline, do not interrupt the user to provide validation error messages.
  • Enforce required field validation only after the first submission attempt
  • On a failed submission attempt, consider scrolling to the first field error to make it easier for the user to correct and re-submit
  • On Submit, provide all applicable validation errors. Do not provide one error, allow the user to fix it, and then show another error when they click submit the next time.

The key thing to keep in mind is that your validation should be unobtrusive and must provide actionable feedback. Logiforms does this for you automatically.

We're constantly amazed at the huge increase in conversions we've seen when form validation is done right. Give it a try (It couldn't be easier with logiforms) and watch your conversion rates skyrocket.

 

0 Comments

Leave Your Own

Remember my personal information

Notify me of follow-up comments?