Chances are if you have a website, you have at least one web form. Web forms can help you collect information for a variety of reasons. For example, you may have one web form for a newsletter sign-up, another for a demo request, and yet another on your Contact Us page. The uses of a web form are boundless. The flexible nature of the form allows you the freedom to collect whatever information you see fit.
However, the adaptability of the form can lead to poorly built forms which create a bad user experience and will frustrate those interacting with them. So how can you ensure that your form is top of the line?
Web Form Best Practices
Keep It Short
Long forms deter users, there is no way around that. Try not to create fields for information which is not absolutely necessary to complete the task at hand or that can be collected at a later time.
For example, theSkimm, a popular daily email subscription, has an excellent signup form displayed below. As you can see, they collect only what is necessary to complete the signup – an email.
Pay Attention to Spacing
The labels for each field should be placed visually close to their respective field. Stick to normal conventions here. Labels are typically directly above or to the left of the field, not below or to the right. Straying from what is typical may confuse the user and cause frustration, potentially even resulting in abandonment of the form altogether.
Related: 9 CRO Facts That Will Convince You to Use It
You also want to avoid ambiguous spacing between fields and labels. Specifically, placing a single label equidistant from two fields will obscure the form.
The monthly fitness membership platform, ClassPass, uses great spacing on their Sign Up form. The labels are directly above their corresponding field and each label is placed the same distance from its corresponding field, allowing the user to move quickly from one field to the next.
Use a Single Column
Aligning your fields in a single column allows for the user to move quickly through the form without interrupting vertical momentum down the page. Remember, the faster a user can move through the form, the more likely they are to complete it. An exception can be made for short or logically related fields which can appear on the same line, such as City, State, and Zip Code.
The Power Digital Marketing Request an Assessment form utilizes a single column, collecting only the necessary information. A great example of both a single column and keeping it short.
Use Logical Sequencing
When you fill out a billing web form, have you ever seen this sequence of fields: CVV, Name on Card, Expiration Date, Card Number? If you have, I would not only be surprised, but would guess that it was very annoying. Certain groups of information fields have a generally accepted standard sequencing, stick to those.
Related: 9 Ways to Take Your CTAs to the Next Level
For example, billing information is usually sequenced Name on Card, Card Number, Expiration Date, CVV. While a shipping address is sequenced Street Address, City, State, Zip Code.
Avoid Placeholder Text
Placeholder text is favored by designers because it eliminates visual clutter on the page. However, when possible this solution should be avoided. Nielsen Norman Group research shows that placeholder text is harmful as it tests the user’s short-term memory by asking them to remember what information goes where.
Their research also suggests it may eliminate the user’s ability to double check their work before submitting and causes confusion when attempting to fix errors.
Give Users Space
Text fields should be about the length of the expected input. Errors may occur if the field is much shorter than the information which is keyed in. For example, if the field for an email address is only 8 characters long, many users will experience run over in the field, making it hard to spot typing errors. Instead, a more appropriate length for an email address field might be 22 characters, giving the user plenty of space.
Distinguish Required Fields
First, you should attempt to eliminate as many optional fields as possible. This goes back to our first best practice, if the information isn’t necessary, try not to include it. If you must include, or strongly desire, an optional field, make sure you clearly distinguish what is required.
Related: Website CRO – Optimize Landing Pages With These Tips
Typically, required fields are noted with an asterisk (*). Since this is a widely recognized standard, it is an easy way to quickly provide clarity to the user. Just make sure to include a note informing them what an asterisk means.
Marketing attribution analytics software provider, TrackMaven, clearly tells the user which fields are required on their Request a Demo form and include a note at the bottom to clarify what an asterisk means specifically.
Be Explicit with Input Requirements
Give users exact instructions when certain fields require specific formatting or inputs. For example, a birth date field may require the input to be formatted as MM/DD/YYYY. Do not expect your user to know that, tell them upfront.
The password field should also explicitly list required parameters. It’s highly unlikely that your user will know that you require minimum 8 characters with an uppercase, lowercase, and special character unless you tell them. Don’t set users up for failure, let them know the requirements beforehand so they aren’t irritated by any error messages they might receive after hitting Submit.
Avoid Reset Buttons
It is rare that a user is going to want to start over from scratch on a form, at the very least the likelihood is far less than the user accidentally clearing the form when attempting to submit a completed form.
If the form collects sensitive information and you want to provide a way for users to abandon the form, stick with a Cancel button that is significantly less prominent than the Submit button. This helps prevent any accidents that will pain the user.
Provide Specific Error Messages
An error message is not the time to be subtle. Make sure you have the ability to list multiple error messages at once so the user can correct any and all errors at the same time rather than submitting and receiving new error messages multiple times.
You’ll also want to highlight the errors in numerous ways. It is best to use bolded red text and highlight the afflicted field in red as well. This points the user directly to where the problem is occurring with clear instructions on how to fix it.
Putting It All Together
While you should try to use as many of these practices on your forms, you may not be able to use all of them on every form. That’s okay! If you have to use two columns, don’t worry, just make sure the visual spacing is appealing and the sequencing is logical. When in doubt, think about how you would want to fill out a form. If you’re confused as the creator, chances are your users will be to.
Don’t forget to test! Sometimes as the creator of the form you may think everything looks great, is clearly explained, and all obstacles have been removed from the user’s way. If that’s the case, have someone else test the form and provide honest feedback. It doesn’t matter who, a friend, family member, co-worker. Just get some eyes on it that haven’t seen the form before. This will help you more easily identify problems and barriers to the user.