Forms layout overview

Forms are a common UI pattern found across Pinterest products. We use them to gather information from users and should be clear and easy to navigate.


Clear information hierarchy

In order to make forms easy for users to scan and fill out, it’s critical that a clear information hierarchy and sectioning (when needed) is used throughout the form. Consistent form and section headers in addition to consistent spacing between form elements controls and sections should make it easy to tell the relationship between groups of information.

Logical and predictable

Forms should be organized in a way that makes sense to the user’s mental model and current workflow.

Use cases

A Pinner, merchant, creator, or advertiser may engage in a variety of types of forms throughout their journey with Pinterest.

Pattern use case 1: In-page forms

An advertiser wishes to update their profile information and navigates to the settings page. Here they can enter new information.

The top of a long form as part of a setting screen.

The form buttons are at the end of the form to make the length of the form clear.

The bottom of the form where we can see buttons.

Pattern use case 2: Forms in modals and side sheets

Smaller, simpler forms can be shown in modals or side sheets.

A lighter form inside of a modal.

This is especially helpful when we want users not to fully leave the context of the page they were on when the form was launched.