Form structure

Owned by Evan McEldowney (Unlicensed)
Last updated: Jul 13, 2022 by Sharon Huang
2 min read

All forms should start on an SF.gov transaction page with a CTA button that leads to the form. (More information about transaction pages on SF.gov)

The form contains:

  • An introduction

  • Form pages with fields

  • A confirmation page

Form title

Start with a verb, always. And keep it short.

If your form has a transaction page that goes with it, use the same title. Following this naming convention will help your visitors identify the service quickly. In Drupal, it would look like this:

Form introduction

Every form needs a short introduction that sets expectations and explains:

  • What the form is for

  • What the form will ask you about

  • What to expect after you fill out the form

This should be friendly, explain to them why they want to fill it out, and about how long it will take to complete.

Sections

If a form has more than 9 questions, break the form into sections.

Name each section and include the name in the page titles.

Page names

Page names must describe the group of inputs on the page.

They must not be the field label.

Forms for repeat customers

Rely on user testing to deviate from these recommendations.

For example, for building permitting, we saw that repeat customers, like architects, expected more questions on one page. On building permitting forms, we group more inputs together as parts of the project, instead of following one question per page.

Ideally a page has fewer than 7 inputs.