How to Create a Well-Designed Form

Design guidance for forms

Know why you are asking every question. 

• Only ask what you actually need.
• Tell people why information is being collected and how it will be used. 

Use plain language. 

• Ask questions using common words, non-technical language.
• Help people avoid making mistakes by using clear hint text.
• Review the guidance in the Plain language standards.

Start with one topic per page. 

• Breaking questions into small, meaningful chunks helps people understand and navigate your form.

Use a single column, vertical layout. 

• This layout works best for screen readers and mobile devices.
• Group radio buttons together under the same heading.

Use branching questions. 

• You don’t need to require all questions from every person.
• Use “branching” questions so people only have to answer questions that are relevant to them.
• Tell people they can skip to another section if the questions don’t apply. 

Do not hide content with opaque or solid rectangles.  

• Sometimes, when people design PDFs, they use shapes to cover or “delete” content visually.
• This should be avoided – covering content makes it difficult to remediate the PDF. 

Do not use the “print to PDF” function from MS Word or Google Docs.

• Doing so will significantly impact remediation.
• Instead, use “Save as a PDF” from the main menu. 

Remediate the PDF form so it is accessible. 

• Make sure the newly designed PDF form is accessible.
• Review the guidance for remediating PDFs.

Keep a well-designed PDF version of any web form you create. 

• Maintain an accessible PDF version of the form after you create the web form.
• The PDF version is a great resource for people who do not have sustained access to a computer or to the internet.

Do not use CANVA to create PDF forms.

Canva cannot create real interactive form fields. For example, if you use a Canva square to look like a checkbox, you will make it significantly more difficult to remediate this form.

Example of a well-designed PDF form

Review this example - PNG - 199.45 KB from the UK government – it is a clear, easily fillable PDF form. 

Some highlights:

• It explains who is eligible to use the form.
• Questions are explained in plain language, including why they are asking for certain fields (e.g. “Providing an email address or phone number gives a quick and easy way to contact you about your application.)
• Questions are laid out vertically. You can easily tab through them. There is plenty of room to type in text fields.
• Date fields use a simple number entry that indicates the format needed.

Resources

• A Field Guide to fix Government Forms - PDF, see page 11 for design examples
• The United States Web Design System for complex for design guidance
• The UK Government Digital Service form design guidance