George Moller

_georgemoller

FORM DESIGN

BEST PRACTICES
 George Moller
_georgemoller

FORM DESIGN BEST PRACTICES

Full Name Labels should be top align and capitalized.

e.g. John Doe Never use upper-case, it’s more difficult to read.

Use placeholder’s text as an example of the intended content.

Placeholders are not replacements for labels. Don’t avoid labels

in favor of placeholders only.

Phone

(+1) 598 ___ ___ Use masks and delimiters when neccessary.

Card Security Code

CSC Show helper text when input is focused.

872 Size fields accordingly.

 George Moller

_georgemoller

FORM DESIGN BEST PRACTICES

Full Name

e.g. John Doe Add focus style to highlight that the input is selected.

Email

somethingwrong Clearly inform the user where the error occurred and
provide information on how to solve it.
The format of the email should be prefix@domain.

Choose Contact Preference

Phone
Cell Phone Place checkboxes underneath each other to allows easy
Email scanning.

 George Moller

_georgemoller

FORM DESIGN BEST PRACTICES

Personal Whenever possible use single column layout.

Multi column layout makes it more difficult to follow.

Full Name

e.g. John Doe

What is your favorite color?

Whenever you have six or less options, don’t use a dropdown

to display them, dropdowns involved two clicks and hides the

options.
Account

Email

e.g. johndoe@gmail.com Group related information.

Password
Add a validation message indicating password strength.
****************
 George Moller
_georgemoller

FORM DESIGN BEST PRACTICES

Limit the size of field and label text.

First Name Full Name

e.g. John e.g. John Doe
Last Name Date of Birth
e.g. Doe 12 june 1989
Date of Birth
12 june 1989
 George Moller

_georgemoller

FORM DESIGN BEST PRACTICES

Break complex forms into a few simple steps.

1 2 3 4
Clearly communicate the progress.

Ba s ke t D e l i ve r y Co nfi r m Done!
R e d u c e t h e n u m b e r o f s t e p s , t r y t o ke e p i t

less than 10.

Minimize the ability to navigate outside of the

wizard.

Allow the user to re-visit a step.