Framer Presents

Freeform, Flexible

June

2024

Forms
Forms 3D

DEMOS

DEMOS

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

Operating System

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 it

Send it

Send data to multiple destinations. Email, Google Sheets, or a custom Webhook, Framer supports it all.

Email

Webhook

Sheets

Watch

Watch

Learn the basics of Framer forms by watching our overview video.


See on YouTube

Connected

Customizable

Secure

Reusable

Flexible

Refined