Figma Forms

Figma Form Blocks

Form blocks are a website layout that gathers visitor information using Inputs, Dropdowns, and Selects. Examples include login, authentication, payments, lead capture, newsletter signup, and settings forms.

Form blocks are part of the Figma Website Builder. This component allows you to quickly assemble websites with Figma Sites.

How to use Forms in Figma

Form blocks are fully responsive and take advantage of Figma Sites Breakpoints. To make sure your forms are as user-friendly and effective as possible, you can stick to these bite-sized UX best practices:

• Place labels above fields for better readability;

• Remove unnecessary fields to improve completion rates;

• Mark required fields with an asterisk (*) or other indicators;

• 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.

Forms Anatomy