Please note that the contents of this offline web site may be out of date. To access the most recent documentation visit the online version .
Note that links that point to online resources are green in color and will open in a new window.
We would love it if you could give us feedback about this material by filling this form (You have to be online to fill it)



View Source | Submit Feedback

Create Amazing Forms

Design efficient forms

Design efficient forms by avoiding repeated actions, asking for only the necessary information and guide users by showing them how far along they are in multi-part forms.

In this guide

  1. Minimize repeated actions and fields
  2. Show users how far along they are
  3. Provide visual calendars when selecting dates

TL;DR

  • Use existing data to pre-populate fields and be sure to enable auto-fill.
  • Use clearly-labeled progress bars to help users get through multi-part forms.
  • Provide visual calendar so users don’t have to leave your site and jump to the calendar app on their smartphones.

Minimize repeated actions and fields

Make sure your forms have no repeated actions, only as many fields as necessary, and take advantage of autofill , so that users can easily complete forms with pre-populated data.

Show progression in multi-part forms
On the Progressive.com website, users are asked first for their ZIP code, which is then pre-populated into the next part of the form.

Look for opportunities to pre-fill information you already know, or may anticipated to save the user from having to provide it. For example, pre-populate the shipping address with the last shipping address supplied by the user.

Show users how far along they are

Progress bars and menus should accurately convey overall progress through multi-step forms and processes.

Show progression in multi-part forms
Use clearly-labeled progress bars to help users get through multi-part forms.

If you place a disproportionately complex form in an earlier step, users are more likely to abandon your site before they go through the entire process.

Provide visual calendars when selecting dates

Users often need more context when scheduling appointments and travel dates, to make things easier and prevent them from leaving your site to check their calendar app, provide a visual calendar with clear labeling for selecting start and end dates.

Hotel website with easy to use calendar
Hotel booking website with easy to use calendar widget for picking dates.

Next Sections

  1. Design efficient forms
  2. Choose the best input type
  3. Label and name inputs properly
  4. Provide real-time validation
  5. Simplify checkout with requestAutocomplete API

Updated on 2014-08-11

Authors

Pete LePage

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License , and code samples are licensed under the Apache 2.0 License . For details, see our Site Policies .