This browser is not supported by FramerForms. Please use a supported browser, such as Chrome, Safari, or Arc.

Create a new form in Framer

How to add a custom form to your website.

1.

Add a form builder in the insert menu

  1. Open the insert menu with the + button in the top left.

  2. Hover over the "Forms" button on the left.

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

  1. Open the insert menu with the + button in the top left.

  2. Hover over the "Forms" button on the left.

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

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