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 Inputs, Dropdown Lists, and Selects. Examples include login, authentication, payments, lead capture, contact, and profile forms.

Form Blocks UI Best Practices

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, including:

• 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");

• Break long forms into logical steps;

• Show clear success messages and next steps labels;

• Provide keyboard navigation where possible;

• Enable forms autofill where possible.

Feature blocks are part of the Figma Website Builder. Learn how to combine them with other blocks and create responsive layouts in seconds.