Forms are important, and a lot of business rely on them.
For many of them, forms are critical. If you don’t have forms, you can’t ask for a credit card number, and your business is dead.
Following best practice in form design helps business by making it easy for a user to complete their goals. It makes their experience seamless and delightful which usually results in a rise in completion rate.
Following just the ten golden rules below will put you in top 1% of form effectiveness. It’s shocking how often businesses don’t put enough (or seemingly any) effort into one of the most critical elements on their website.
1. Keep it short
Eliminating unnecessary fields requires time but increases the conversion rate.
2. Visually group related labels and fields
If your form asks about different topics, section it into separate groups of fields and name the groups accordingly.
3. Present fields in a single column layout
Multiple columns interrupt the vertical momentum of moving down the form. Acceptable exceptions: City, state, zip code.
‘Option A’ vs ‘Option B’
If you had to choose only between A and B, which one would you choose?
Answer: Option B.
The primary call to action should be on the left and aligned with the rest of the form. Easy scan and quick access by keyboard.
But it’s even better to de-emphasize the secondary call to action.
4. Use logical sequencing
It’s important to consider the cultural difference in sequencing information. Dates as an example, Japan, Europe and the US all have a different way of displaying it.
5. Avoid placeholder text as a label
Without labels, users cannot check their work before submitting a form. Disappearing placeholder text strains users’ short-term memory.
6. Match fields to the type and size of the input field
If your form requires a 3-digit security number, design for that size. Imagine if the security number field was as big as the rest of the fields? This would easily create doubts and confusion.
7. Distinguish optional and required fields
No more asterisk symbol* in forms. If you don’t need the information, don’t ask for it. You can always ask for it later.
8. Explain any input or formatting requirements
9. Avoid Reset and Clear buttons
Thank god it’s not a common practice anymore. But you can still see it from time to time.
10. Provide highly visible and specific error messages
Be as specific as possible. And be visible too. Err on the side of being too harsh than too bland.
Conclusion
Now people will breathe through your form and off to your Thank You page!
Use these top 10 tips when you design for forms
* PS. This field is optional
PPS. [ Enter PS here. It should be no less than 3 characters unless it’s an emoji. It should also be either funny or informative. Ideally both. ]