Web Form Design Recommendations

Thursday, 20 August 2009

Here is a checklist of recommendations for form design. I extracted this from Luke Wroblewski‘s excellent presentation on Best Practices For Web Form Design; I took my favourite points, edited them, and arranged them into categories for easy reference. I use this checklist when designing and reviewing forms. For best results, view the original presentation and commit it to memory first.

Individual fields

Form label alignment

  • For reduced completion times & familiar data input: top aligned
  • When vertical screen space is a constraint: right aligned
  • For unfamiliar, or advanced data entry: left aligned

Field lengths

  • When possible, use field length as an affordance
  • Otherwise consider a consistent length that provides enough room for inputs


  • Employ flexible data entry
  • Use inline validation for inputs that have potentially high error rates
  • Use suggested inputs to disambiguate
  • Communicate limits
  • Avoid changing inputs provided by users

Help & Tips

  • Minimise the amount of help & tips required to fill out a form
  • Help that is visible and adjacent to a data request is most useful
  • When lots of unfamiliar data is being requested, consider using a dynamic help system

Field groups


  • Use the minimum amount of visual elements necessary to communicate useful relationships
  • Consider tabbing expectations when laying out forms

Selection Dependent Inputs

  • Maintain clear relationship between initial selection options
  • Clearly associate additional inputs with their trigger


  • Avoid secondary actions if possible
  • Otherwise, ensure a clear visual distinction between primary & secondary actions
  • Align primary actions with input fields for a clear path to completion



  • Illuminate a clear path to completion
  • Map progressive disclosure to prioritized user needs
  • Provide indication of tasks in progress
  • Disable “submit” button after user clicks it to avoid duplicate submissions


  • Clearly communicate a data submission has been successful
  • Provide feedback of data submitted


  • Clearly communicate an error has occurred: top placement, visual contrast
  • Provide actionable remedies to correct errors
  • Associate responsible fields with primary error message
  • “Double” the visual language where errors have occurred

Tags: ,


You can leave a comment, or trackback from your own site.

  1. Well presented!!
    This article is so beneficial for me.I think that i have to implement these tips.
    waiting for your next post

Leave a comment