Framer Presents
Freeform, Flexible
June
2024
Examples of unique ways to set up, style, and animate Forms in Framer.
Basic
A simple form with custom styles, fonts, a focus effect, and a submit button. A really nice place to start.
Remix
Components
A form with inputs as components. We also support Variants, allowing you to make infinite custom inputs.
Remix
Success
By creating a Component out of the entire Form, you can design custom success states. Ultimate flexibility.
Remix
Loading
Design infinite types of loading states with Button Variants and Form Variants. Only in Framer.
Remix
Checkboxes
Design custom checkboxes with inline links. The labels are simply text layers you can edit freely.
Remix
Radio Groups
Design forms with multiple options using Radio Groups, with Focus and Checked states you can customize.
Remix
Text Areas
Add resizable text areas to capture longer content. Works seamlessly with Stacks and auto-sizing. Nice.
Remix
Validation
Type a single word, then submit. Then, make it an email address.
Custom validation without code.
Remix
Send data to multiple destinations. Email, Google Sheets, or a custom Webhook, Framer supports it all.
Learn the basics of Framer forms by watching our overview video.
See on YouTube
Connected
Customizable
Secure
Reusable
Flexible
Refined