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.
Principles
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 form buttons are at the end of the form to make the length of the form clear.
Pattern use case 2: Forms in modals and side sheets
Smaller, simpler forms can be shown in modals or side sheets.
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.