Design a form

On this page:


Overview

A well-designed form should be easy for everyone to complete. Careful consideration should go into the design before the form is created. This will result in a better, more usable form.

Principles

The form is not the goal. The goal may be to graduate, or apply for a program, or get information about an event, or any of the many things for which forms exist. The form is a task that must be completed to achieve that goal and should not be a barrier. A poorly designed form is difficult or frustrating to complete.

With this in mind, a good form should:

  • Have a single purpose
  • Request only the necessary information
  • Use clear, understandable language
  • Be easy to complete

Form purpose

The first step in designing a form is to determine the purpose of the form.

Think about the motivation of someone filling out your form. What goal are they trying to reach?

Focus on the goal and give your form a single purpose. That simplifies the form and keeps it light. Too many goals complicates a form and adds extra form fields to be completed.

Necessary information

Now that the purpose of the form has been established, what information does someone actually need to fulfill the task?

Many people don't like providing more information than necessary. As the new General Data Protection Regulation (GDPR) in the European Union shows, people are concerned about their data and privacy. A good rule to follow is to ask for only what you need, not what you want. This helps build trust. If you must collect information that is sensitive or may seem intrusive, consider providing an explanation of how that information is used and why it must be collected. Be certain to follow university policies about collecting and storing sensitive data.

Before they begin filling out the form, make it easier for someone to gather needed information. For example, when requiring information such as a student or employee ID number, remember that this information may need to be looked up. A link to the system where they can find their ID number should be added to the instructions for the form.

If you are redesigning a form, do you really need all the information that your previous form collected? If someone is signing up to receive an email newsletter, do you really need their name? Is a street address necessary?

The more information you ask for, the longer and more complicated the form. And when forms are longer than necessary, people are more likely to just stop filling them out and not complete their task.

Many forms request extra information intended to be used for marketing or other purposes. You have probably filled out forms like that. You have also likely filled out forms with a checkbox to sign up for a newsletter--with the checkbox already selected. It is better not to do this. If you must, after the form has been completed and submitted, you can make your request to sign up for your newsletter or complete your other task.

Clear language

Once you have decided what information you need to collect, you will need to craft clear questions that are easily understood.

Terms that may be familiar to you may not be understood by people trying to complete your form. This is particularly true of acronyms and jargon. While "DOB" is short, not everyone will know it stands for "Date of Birth".

Short, simple sentences are more easily understood than long, complicated ones. Direct questions are more easily understood than complex ones.

As you craft your questions, ask yourself:

  • Are there any questions that could be misunderstood? For example, if you ask for household income, do you mean net income or gross income?
  • Are there any questions that could be stated more simply?

Ease of completion

Finally, consider how easy it will be for someone to complete your form.

The questions should be in a logical sequence. For example, people are used to seeing addresses presented in a particular order. Don't change the expected order unless there is a specific reason, such as using a database of zip codes to supply the state.

If there are any questions that would disqualify someone from completing the form, these should be the first questions on the form. Having someone complete some or all of the form first wastes their time and may create a hardship for some people.

A well-designed form should require few instructions. Simple instructions, such as indicating which fields are required or the necessary format for dates, will help someone complete the form. If more complex instructions are needed, especially in the middle of the form, consider redesigning the form.

Technical implementation

Mozilla provides a useful guide to native form fields that can help you match the type of data to the most suitable form field. Native HTML form elements should be used whenever possible. They provide expected functionality and behaviors that improve accessibility and help everyone complete the form.

Non-form elements should generally not be used within a form. Some assistive technologies such as screen readers enter "forms" mode within a form and will ignore any content not programmatically associated with a form element.

Choose your form field type

The type of form field can affect the ease with which someone can complete your form. Choosing the best form element for each question can make the form easier to complete by matching expectations of how a particular form field works.

What type of form field is appropriate for the type of information you are collecting? Consider the usability and accessibility of the types of form fields you plan to use.

When choosing what type of form field to use, ask yourself:

  • Does the question require typing a response?
  • Does the text require a specific format, such as for an email address, telephone number or date?
  • Does the question require selecting from a limited number of options?
  • Can only one option be selected or can multiple?
  • Are the options on a range or discrete values?

Common form fields for text responses

  • Text: Use the <input type="text"> for a response that requires a single line of text.
  • Textarea: Use <textarea> for a response that requires multiple lines of text.
  • Specific formats: The following input types help people using a mobile device complete your form by displaying a customized keyboard layout that makes it easier for them to enter the required data:
    • <input type="tel"> for telephone numbers
    • <input type="url"> for URLs
    • <input type="email"> for email addresses
    • <input type="password"> for passwords
    • <input type="date"> for dates, should specify format
    • <input type="number"> for numbers; not for data with numerals, such as credit card numbers and postal codes

Common form fields for selecting from a set of options

  • Radio
    • Only one option may be selected
    • Best for a few options
    • <input type="radio">
  • Checkbox
    • Zero to all options may be selected
    • Best for a few options
    • <input type="checkbox">
  • Select
    • May be used for a few or many options
    • May be used to select a single option (default) or modified with the "multiple" attribute to allow selection of more than one option
    • <select>, with one or more <option> elements nested
  • Slider
    • For selecting from values in a range
    • Best when exact values are not important
    • <input type="range">

This is document atvi in the Knowledge Base.
Last modified on 2018-12-17 14:03:38.

Contact us

For help or to comment, email the UITS Support Center.