Create a new form in Framer
How to add a custom form to your website.
1.
Add a form builder in the insert menu
Open the insert menu with the + button in the top left.
Hover over the "Forms" button on the left.
Click on the "Form Builder" button at the top.
Now you have a new form with a few inputs and a submit button!
2.
Add form inputs
Open the insert menu with the + button in the top left.
Hover over the "Forms" button on the left.
Click on the "Form Builder" button at the top.
Now you have a new form with a few inputs and a submit button!
3.
Add more form inputs with FramerForms
FramerForms adds tons of new inputs that are fully compatible with Framer's form builder! You can mix and match Framer inputs with input components from FramerForms.
Click on any of the buttons below to copy, then paste into a form in your Framer project.
Copied!
Paste into Framer
Slider Input
Create a number slider input with custom styling
Copied!
Paste into Framer
Image Select
Create a grid of selectable images
Copied!
Paste into Framer
Net Promoter Score
Measure customer loyalty and satisfaction
Copied!
Paste into Framer
Phone Number Input
Phone number with country code input
Copied!
Paste into Framer
Collect UTM Tags
Include UTM parameters in form submissions
Copied!
Paste into Framer
Buttons Input
Select an item from a grid of buttons with text
Copied!
Paste into Framer
Pre-fill Form Inputs
Fill input values with URL parameters.
Copied!
Paste into Framer
Text Input Min/Max Length
Add min & max number of characters to a text input
Copied!
Paste into Framer
Text Area Auto Height
Add a text area input that auto resizes to text height
Copied!
Paste into Framer
Rating Input
Add a star rating input to your form
Copied!
Paste into Framer
Country Select
Dropdown list of all countries in the world
Copied!
Paste into Framer
URL Data Collector
Collect the page URL, referrer URL or URL parameters
Copied!
Paste into Framer
Password Input
Add a password input with a show/hide text button.
4.
Make your form a multi-step form (optional)
Now that you've customized your form, you can turn it into a multi-step form with multiple pages, previous and next buttons for navigating pages, and conditional logic.
Create a Multi-Step Form
You’re all set!
Your form is ready to go! You can return to this walkthrough anytime with the "Create a new form" button on the dashboard.
Return to dashboard