News
How to Add a Form to Your Framer Website (2026 Guide)
Last updated:
Written by:
[UPDATE] Originally published in 2024. Updated in August 2026 to reflect Framer’s latest updates.
Framer's built-in Native Forms feature gives you a full form builder inside the canvas - no plugin or third-party embed required for most use cases.
Here's exactly how to add one, customise it, and get the submissions where you need them.
Step-by-Step: Adding a Form
Open the Insert menu and choose Form, or drag the Form component onto your page.
Add the input fields you need - Framer supports Text, Checkboxes, Radio Groups, and Select Controls out of the box.
Style every state (default, focus, checked, loading, and success) with freeform editing so the form matches your site's design system.
Set where submissions should go under the form's data settings.
Customise what happens after someone submits - redirect them, show an overlay, or change the button/form state.
Preview the form end-to-end, then publish.
Input Types Available in Framer's Native Forms
Forms are built from four input categories:
Text
Checkboxes
Radio Groups
Select Controls.
The Text category alone covers eight distinct types (standard text, text area, email, number, phone, URL, date, and time) which covers the vast majority of what most contact, booking, and signup forms need.
Where Does Your Form Data Go?
You can route submissions by email, straight into a connected Google Sheet, or to a custom webhook for more advanced integrations (e.g. piping leads into a CRM). Check out our tutorial to connect your Framer form to your Beehiiv newsletter.
Framer also handles the security side by default, with built-in spam protection, rate limiting, and a fallback-email safety net if your primary destination fails.
Can You Add a File Upload Field to a Framer Form?
Not as a native input type. As of this writing, Framer's form builder doesn't include a built-in file-upload field.
If you need people to upload files (resumes, briefs, images), your two practical options are:
route the form to a webhook and handle the upload in that connected tool
reach for a dedicated forms plugin instead
For the latter, FramerForms is a purpose-built plugin that adds true file-upload fields and multi-step logic to your Framer forms - use code FMPT10 for 10% off.
Framer Forms vs. a Forms Plugin: Which Should You Use?
For most contact, newsletter, and simple signup forms, Framer's native forms are the easier choice: no extra cost, and everything lives in the canvas alongside your design.
Reach for a forms plugin or embed instead when you need file uploads, multi-step/conditional logic, or a specific integration native forms don't cover.
FAQ
How do I embed a form on my Framer website?
If you're using Framer's own form builder, you don't embed anything - you insert the Form component directly on the canvas and it's part of your page. "Embedding" only applies if you're using an external tool like Typeform or a custom form service; in that case, drop in an Embed component with that service's form URL or code.
Is there a dedicated form builder plugin for Framer?
Yes, several. Native forms cover most standard use cases, but if you need more advanced logic or a file upload field, check the Forms section of the Framer plugin directory for options built specifically for those gaps.
Can I connect a Framer form to Mailchimp, Beehiiv, a CRM, or another tool?
Yes, via the webhook option in the form's data settings, that lets you pipe submissions into most external tools that accept an incoming webhook.
