The down and dirty 5 point checklist for successful form fields - Boost the effectiveness of any form on your site or app.

Intuitive forms = more conversions and better engagement.

I'm willing to bet that EVERY site or app has a form field that is critical to conversions or engagements. 

We are talking:

  • sign ups
  • registers
  • contact forms
  • webinar sign ups
  • billing info
  • login information
  • forgot password
  • personalization of products
  • etc

Here is an example of 3 form fields with very poor UX

At face value it looks clean and simple however if you dig a little deeper it is missing key principles that make a great form successful. Questions arise such as:

"I got distracted and forgot what I will filling in for the second form field"

"I just moved and don't have my zip off hand"

etc

To make sure your form is as effective as possible you want to make sure all these elements are present for each field:

  1. Titles for each form field
  2. Hint text (not critical but can be very helpful
  3. Indicate if a form was filled out correctly or incorrectly (I have always hated completing a HUGE form and then something is incorrect but I have no idea where the error is located)
  4. Clear visual states (completed, incorrect, active, etc)
  5. Aids to help the user complete the form quickly and accurately

This form is on point with great UX for the user:

Ahh much better. Lets take them one at a time:

1 - All fields have clearly indicated what needs to go in the form field

2 - clear "hinting" text of what would go in each text box

3 - the complete fields clearly indicate if this is an acceptable entry (ie. email doesn't have an @ or .com/.org/etc) - this reduces the time and effort a user would have to take to figure out which is incorrect

4 - Clearly showing the user exactly what state they are on

5 - Helping the user complete form fields by presenting functions like "use current location" for them to quick click and their current zip is placed in the form field

But Zach, that looks so boring. 

Allas! You can take these same principles and make forms that are more on brand as long as those 5 principles are present.

Or this

BAM! Options are endless and only bound by your creativity and innovation.

Go get em!


Want to see if your forms are effective? I'm not just saying looking at google analytics and seeing how many people come to the page and how many sign up. I mean understanding at exactly which field you are loosing them? How to streamline a sign up or opt-in?

Sign up for my newsletter to receive insights like this on how to improve your site.