Create Framer forms

Add a form with pages, logic and file uploads to a Framer site by pasting one snippet into an Embed component, and what that gives you over Framer's forms.

Framer ships a form component of its own, and for a name and an email address it does the job. The limits show up when a form needs more than one page, a file attached, or a question that only appears after a particular answer. None of that is in Framer's builder.

Tinyform builds those forms and Framer displays them. You write the form in the editor, publish it, and paste the snippet from its Share tab into a Framer Embed component. The form then runs inside your Framer page and every answer lands in one Submissions tab.

Why put a form from Tinyform in Framer?

Framer's own forms are fine for a simple contact box. Reach for an embedded form when you want any of the following:

Multi-step forms for onboarding, surveys and applications, built from the New page block
Conditional logic that shows, hides or requires questions as the visitor answers
File uploads, so a visitor can attach a CV, a screenshot or a photo
Calculated fields for quotes, scores and prices worked out from the answers
reCAPTCHA on the submit button to keep automated submissions out
Webhooks and a REST API to hand each submission to whatever runs your business
One place for the answers: filter, search and export them from the Submissions tab
Email notifications to you and a confirmation to the respondent on every fill

There is no Framer plugin to install. The snippet is the entire integration, and because the widget script is always loaded from your own Tinyform install, a fix to it reaches every Framer page that pasted the snippet.

How to embed a form in Framer

The whole thing takes a few minutes: build, publish, paste.

1. Create the form

The editor at /forms/<id>/edit works like a document. Type your questions, press / on an empty line to insert a block, and drag rows into place. Open Customize to set the colours, the font and the button style so the form matches the site it will sit in. Create a form has the details.

Customize the form Pick a theme or set your own colours and font.

Logic and calculations Build forms that adapt to what the visitor answers.

Prevent duplicate submissions Keep the data clean by refusing a second fill.

Collect signatures Take an electronic signature drawn on the page.

File uploads Collect images, PDFs, video and audio, up to 10 MB a file.

Hidden fields Carry a campaign or a plan name in from the page's URL.

2. Embed the form in Framer

Publish and open the Share tab
Press Publish in the editor, then open the form's Share tab and choose Embed Form.
Pick the Standard embed and get the code
Leave the embed type on Standard. Dynamic height is on by default and keeps the frame the height of the form as the visitor moves between pages; Transparent background lets the Framer page's own background show through. Press Get the code and copy the snippet, or press Copy embed link if you would rather paste a URL.
Add an Embed component in Framer
Insert Framer's Embed component where the form should sit. Set it to HTML and paste the snippet, or set it to URL and paste the embed link.
Publish the site
Publish in Framer. The form is live on the page and collecting answers.

Embed forms on Framer goes through the Framer side with screenshots.

3. Send the answers on

A submission does not have to stay in the Submissions tab. A webhook posts it to any address the moment it is made, and the REST API reads submissions back on demand. Direct connections to the tools below are on the way; the Integrations section lists what is live.

The same form can be embedded on several Framer pages, or on a site that is not Framer at all, and every fill arrives in the same Submissions tab.

When to choose an embedded form over Framer's

If the form is a name and an email address, Framer's own component is the shorter path.

Switch to an embedded form when you need to:

Ask for more than contact details, with question types Framer does not have.
Add file uploads, conditional logic or a multi-page flow.
Keep every answer in one place with filters and export.
Notify people by email or hand submissions to another system automatically.
Let a colleague change the questions without touching the Framer project.

Frequently asked questions

How do I embed a form in Framer?

Copy the Standard snippet from the form's Share tab and paste it into a Framer Embed component set to HTML. Publish the site.

Can the form send emails?

Yes. In the form's Settings tab you can switch on an email to yourself for every submission and a confirmation email to the respondent.

Can I build a multi-step form in Framer?

Yes. Split the form with the New page block and embed it the same way. Create a multi-step form in Framer shows how.

Can a form in Framer take file uploads?

Yes. Insert a File upload question; a respondent can attach up to 5 files of up to 10 MB each per question. Create Forms with File Upload in Framer has the details.

Is there a submission limit?

There is no per-form cap unless you set one in Settings. What an install allows in a month is described on the Fair Use page.

Can I build a contact form in Framer?

Yes. Start from a contact form in the template gallery, adjust the questions and embed it.

Where do the submissions go?

Into the form's Submissions tab, where you can filter them, download attachments and export a CSV.

Can I reuse one form on several pages?

Yes. Paste the same snippet on as many pages as you like. Every fill lands in the same place.