Figma Forms
Figma Forms
Preview
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 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.
Figma Forms
Form Blocks
web forms
forms templates
figma ui kit
Website examples