Forms

Creating really good forms is hard. If the form isn't clear, the people filling it out may not tell you what you or they actually need. Worse than that they may just give up and try a different service. Having a captive audience with no option but to use your form is no excuse for lazy form building.

For a really nice summary of creating great forms you can do worse than look at this Smashing Magazine article. The article's a few years old, but is still very relevant today.

Basing your form design on a customer’s perspective is the way to make forms clearer and easier to use. A user should not be forced to adapt to a business process. Good form designs, and therefore higher conversion rates, come from testing with and understanding the context of your users.

Principles

There is no silver bullet for form design, it depends on what you are trying to achieve based on business goals, user needs and context. Some of the key things to think about when you're designing a form are:

  • Do you even need the form?
  • Can you simplify the form?
  • Are the form labels clear. Do they use simple, uncluttered English?
  • Can you help explain things a bit with a little extra help text? Put help text inline where it’s clear and obvious. If you feel the help text is too long for this then probably something is wrong with the form design.
  • If you have a required field, labelling it with the text "required" is the best option. Asterisks are clear to many people but not all, and just needs some extra explanation text anyway. If most of the fields are required, use "optional" for the optional ones.
  • Can you use a multipart form, or chunk things together? People find long forms difficult and daunting, so splitting it up into different sections helps. Show the path to completion - make the steps to accomplishing the goal clear.
  • Consider the context - what is the form being used for? How will it be used? Who is using it? Will they be using a mobile? An application form will differ from a marketing email form
  • Keep form communication consistent - think of a form as a conversation that your customer has with your brand.
  • Have you done any user testing? Very often you might think a form is really clear, but showing it to half a dozen people will make you realise you’ve made all sorts of assumptions. If you feel you don’t have the time to do any user testing, or it feels like the form isn’t important enough to make testing worthwhile, then I’d say that’s a good test for not needing the form in the first place!

And finally, have you really done that user testing or did you just think it'd probably be ok as it is because it makes sense to you and someone else in the office?

A note on label alignment

There are advantages and disadvantages to both top-aligning and left-aligning form labels. In most instances top-aligned labels tend to reduce form completion times.

The tradeoff is that they take up more vertical space. Sometimes you want to slow users down when filling in an important form. In these instances a left-aligned label may be better.

Sample form

this is some text that might be useful

Stacked Checkbox
Inline Checkbox
This should be an email address that you have access to currently.
Stacked radio buttons
Inline radio buttons

Example help text that remains unchanged.