I recently took a course on building responsive web forms that had some great take-away items and wanted to provide a quick reference.

  • Every form should have a form title describing it’s purpose.
  • Avoid using “Submit” for buttons that process forms, use a term more user focused like “Purchase Tickets”
  • Limit forms to the bare minimum (no unnecessary items)
  • Forms should be single column and labels should be above and to the left of fields to keep the eye pattern straight down the left column, not left right, left, right
  • When gathering information that could have varying formats, such as phone numbers around the world, make sure the input accommodates all possible options.
  • Break large forms into separate forms, example 20 input fields into 4 forms with 5 fields. Or at least break it into logical field sets.
  • Use radio buttons and check boxes for 5 or less choices, drop down select options for more than 5
  • Replacing labels (< label >) with placeholder text can lead to confusion.
  • Browsers handle autocomplete differently.
  • Never use reset buttons.
  • Indicate on the page where validation errors occur (not only at top)
  • Anything on a mobile device that needs to be touched, like a submit button or an input, should be about 44 pixels tall.