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

rule-1-amazon

Eliminating unnecessary fields requires time but increases the conversion rate.

2. Visually group related labels and fields

rule-2-group-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

rule-3-vertical

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?

option-a-b

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.

de-emphasize-secondary-cta

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

rule-5-placeholder

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

rule-6-match-size

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

rule-8-explain

9. Avoid Reset and Clear buttons

rule-9-reset

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

rule-10-error-msg

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. ]