Form Example and Guidance

Planning Tips

Only ask for information you plan to use. Remember that the shorter your form, the higher your completion rate.

Be sure to give your visitor a good reason to share their information. What benefit do they get in return?

Let them know what will happen after they submit the form. How soon will you respond to them?

Form Elements

Labels and Help

Include help text if you need to explain the purpose of a field or formatting requirements.

Use placeholder text as supplemental information only, since it disappears when the user clicks or taps in the field.

Radio Buttons

Use these when your visitor can select only one choice.

Drop Down

Anything you put in a drop down menu is out of sight until the user selects it. If you’re presenting only a few options, use radio buttons instead.

Checkboxes

Use a checkbox when your visitor can choose more than one, or when you want them to opt in or out of something.

Multi-Select

Multi-select menus are difficult to navigate. Avoid them when possible.

Clear Form Button

The Clear Form button is gray. In this example the form background is gray and matches the button color, so the button appears to be a text link. This deemphasizes it, since it is rare that a visitor will need it. (In a future release, we’ll make the clear button optional.)