Web Form Design Best Practices

Posted on in Blog

This blog was written by Oneupweb graphic designer Jess.

Forms.

The most annoying things on the internet. Well, if you, the person behind the form design, gets it wrong, it is. So, what is it about forms that can make people so miserable? What can you the site owner, the one with THE POWER (*insert He-Man gif here*), do to design better forms?

5 UX Best Practices for Forms

Form design isn’t necessarily hard. To make a form that’s friendly and easy to complete, you should:

  1. Clearly tell the user what is expected of them.
    Indicate expected format, as well as optional versus required. Have styles that tell the user when a box is clicked or when an item was missed or incorrectly entered.
  2. Don’t get cute with form layout.
    Stack form items rather than setting them side-by-side. Place form labels outside of your form input box, with labels above and hint text below.
  3. Be accessible, be-e accessible. Form input boxes should be navigable by keyboard, colors should meet a 4.5:1 contrast, labels and hint text must be readable by a screenreader, text must be at minimum 14pt.
  4. Mobile-friendly is user-friendly.
    Ensure the right keyboard appears for the right kind of form, have large form input boxes so they’re easily tappable with large fingers, ensure your form breaks down appropriately at small sizes, set type sizes to at minimum 14pt. 
  5. Da quick-a, da bett-a!
    Make your form as fast and simple as possible with as few form items as necessary. Integrate smoothly with autofill or other browser-native speedy features. Consider a few small animations or transitions to help the user know they’re doing things right and that make the experience feel faster!

A list of exactly five things? Ooh, how convenient. Let’s dive into each one.

Clearly tell the user what is expected of them.

You’ve just finished filling out a form. It’s an important form. You’ve had to dig up your license for this form! Or maybe a credit card you never use because the form doesn’t work with autofill and now you need to know the number. But you’ve done it. You hit submit and are ready to be done with this nonsense.

ERROR ERROR!

Oh no! But where? And why? What did I do wrong? Is it the phone number? But nothing said you had to enter your phone number. And besides, it doesn’t even tell you what style it wants! Dashes? Dots? None at all?

You enter the phone number.

ERROR ERROR!

Not again! Oh no! What else could it be? What else am I missing? You’re in a nightmare.

Okay, that’s a little dramatic. I know. But I bet you’ve experienced what I’m talking about, haven’t you?

At the end of the day, a form stands between the user and the thing they want. And one of the worst things you can do to your user is to make the experience a stressful guessing game.

Every time you throw up a wall and say “Nope! You missed something! Do it again” you risk losing your audience. So your primary goal should be to reduce the ways that can happen, and ensure that it’s a smooth and easy fix when it does.

You can do this by following these form design best practices:

  • Clearly indicate required information!
    Luckily, we’re 20 years into this internet business, so most people know a little asterisk next to a label means “this one’s a must-do.” Simple as that.
  • Use red to indicate where an error happened.
    While you can get cute about what color you use, red is by far the best to stick with. It will most likely stand out from your brand palette and catch the eye of your user. When indicating what was missed, consider a treatment around the form input box (e.g., a thick outline, a red glow) and highlight the label in red.
  • Give the user a hint before and after the error
    Your form input box should come with an example that tells the user the expected format. So, for example, if you must have dashes in your phone number, you should have text below your form input box that says ex: 555-555-5555. When the user commits an error, you should reiterate the expected format, and if possible, tell them what they were missing.

Don’t get cute with form layout.

Look, as a graphic designer, I’m contractually obligated to tell you that creativity is lovely.

Except in form design. Kind of.

See, you can get creative with some things. The page itself, how it animates in, how the form animates, how the brand is applied. You know, stuff that’s more about what’s around the form than the form itself. But it’s when we dive into the labels, form input boxes, hint text and buttons themselves that we can’t get too wild.

Straying too far from form layout best practices can create confusion at best. At worst it can make the form inaccessible, unfriendly on mobile, or simply too confusing to interact with. You don’t want that.

So, when creating your form, here’s what you should do:

  • Stack your form input boxes
  • Place your labels above those boxes
  • Place your hint text below those boxes

We recommend vertically stacking your input boxes and your labels in order to create clear groups. It should always be obvious what label and hint text belongs to which form input box. It also allows for a shorter eyepath (how your eye travels across information from start to end). The eye has less searching to do when hopping from one input to the next. It’s a simple, downward flow.

While we would not recommend ever putting the label at left of the input box, there are rare times when it’s acceptable to put your form in a two-column layout. For example, if you have a contact form with only four input boxes, that’s not asking a lot of your user. So you’ll have a little more wiggle room to gently break a rule.

Hint text is the small text telling your user input expectations (we talked about it in the previous section.) Hint text has historically lived in the input box, but no more! This is not only an accessibility issue, it’s also bad UX! Why? Well, what happens to that hint text when you click the input box? Or when you’ve already entered your information?

Poof! Gone.

Placing your hint text outside of the input box means that it’s always visible. (Remember, it’s all about making it as easy as possible!)

Be accessible, be-e accessible.

If there’s one thing no one can afford to be nowadays, it’s inaccessible. And for very good reason. Now, that applies to your whole site design (and, you know, should apply to everything else), but it also specifically applies to your form.

Form accessibility comes down to a few primary things:

  • Navigability with only a keyboard
  • Color contrast & text sizea
  • No hidden text or items hidden behind pop-ups
  • Labels and text that are readable by screenreader

Navigability with only a keyboard

Designing positive experiences on the web, form design included, means making a site that users can easily travel through without once touching the mouse. Want to know what I mean? Go to Amazon.com and hit “tab.” When you land on an item you want to interact with, hit the space bar. This is a standard accessibility practice that’s important for folks who struggle with or can’t use a mouse. This tabbing method is often set up with screenreaders in mind so that as our user travels the page, each item is read aloud.

Your form should work exactly the same way. A user should be able to hit tab to travel from one item to the next, the down arrow to open dropdowns, and the spacebar to select items like checkboxes, radio buttons or submit.

Color contrast & text size

Your entire website should meet the color contrast ratio 4.5:1, and that’s true of your forms as well. This means all text, even hint text, should be clearly visible on the background. If you’re not sure whether your colors pass, test them using WebAIM.org’s color contrast tool.)

For more information, visit WebAIM.org.

No hidden text or items hidden behind pop-ups

There was a time when putting hint text behind an icon with a pop-up was pretty standard. This is another one that’s since been abandoned for better accessibility. For folks with low vision or struggling with motor abilities, directing a mouse over a small icon to reveal a pop-up that easily disappears is a big ask. And hiding the hint text behind a pop-up is taking the risk that some users won’t be able to find it at all. Hint text should be visible, easy to read, easy to see, and short and sweet so it doesn’t need a whole pop-up to tell the user more.

Labels and text that are readable by screenreader

Another critical aspect of UX form design is the development that goes into creating it on your website. There are lots of special considerations that need to go into the code, from making sure the right elements are in place for a screenreader to best get through it, to making sure the field that the user is interacting with is highlighted and many more.

Form Design Look & Feel

Earlier, we said that creativity should be limited to a few select places. You may have thought to yourself “Man, I need examples!”

Good news! I found a few of those for you. Check out how these web designers and developers have been adding a little creativity around their form.

This lovely and simple form on Studio Chevojon checks all the boxes. This form meets color contrast ratios for the type against the background, the fields have the labels above them so the text doesn’t disappear, and it’s a good example of a two-column form that works well for the user.

https://www.womensresourcecenter.org/get-involved/give-today/

The donate form for the Women’s Resource Center is very straightforward, but, paired with high contrasting color and thoughtful typography, shows that a form can be beautiful as well as functional. Again, the labels and hint text are always accessible and don’t disappear when the user starts to type in the field. It’s easy to navigate through and complete, creating a low barrier for receiving donations.

This beautiful and unique contact form seems to break the rules, but doesn’t! FuenteReal’s form has the labels in the field, but when you select it to enter your information, it slides to the right and remains visible! So cool! This creative form shows how the design and development work together to create a form that isn’t cookie-cutter.

Asking Experienced Designers for Support

For something that seems so straightforward, there are a lot of small components to creating forms in a way that encourages, not discourages, a user to submit. And it can be really tricky! So, if you need help creating a form that best meets the goals you and your users share, reach out online or call (231) 922-9977.

Up Next

Brands in every industry are leaning into digital tools to monitor, optimize, and improve operations. While CRM solutions were once only popular among sizeable B2B organizations, now companies of all sizes are wondering how to choose the right CRM solution to inform their day-to-day. Ready to get plugged in? Here’s what you need to know...

Read More