Forms

Form blocks gather visitor information using Text Inputs, Dropdown Lists, Selects, and other forms UI elements.

Form blocks are website sections that gather visitor information using Text Inputs, Dropdown Lists, Selects, and other Forms UI elements.

These include templates for login forms, authentication, payments, lead capture, contact, and profile forms. 

Each form block is responsive and supports multiple Breakpoint variables, as well as other Figma variable modes that allow you to customize the appearance of forms deeply. When customizing forms, make sure to align them with common UX best practices for designing forms. This includes:

• Place labels above fields for better readability

• Remove unnecessary fields to improve completion rates

• Mark required fields with Asterisk or other Cool Copy Paste Symbols

• Use single-column form layouts for faster completion and higher completion rate

• Display human-readable error messages next to relevant fields

• Write form-specific button text (e.g., "New Account" instead of "Submit")

• Use input captions and Tooltip components when form fields require additional explanation

• Break long forms into logical steps

• Show clear success messages and next steps labels

• Provide keyboard navigation where possible

• Enable forms autofill where possible.