Framer Forms: Contact Forms, Waitlists and Integrations in 2026

Framer forms are built into the editor. You insert a form from the Insert menu, add text, checkbox, radio and select fields, and send each submission to email, Google Sheets or a webhook. Spam protection is on by default. For multi-step forms, conditional logic or file uploads, you need a plugin or an embedded form.

This guide covers how the native Form Builder works, where submissions can go, how webhooks are signed, how to collect waitlist and newsletter signups, the spam settings, and how to track form conversions. If you are new to the editor, start with our Framer tutorial for beginners first.

How Framer Forms Work

A Framer form is a container with inputs and a submit button that posts its data without any third-party service. Framer's Academy lesson on creating your first form puts it simply: open the Insert menu, choose the Form Builder and drag the default form onto the canvas.

The default form arrives with labels, inputs and a submit button already laid out. You then select the form layer and set three things in the right sidebar: which fields it collects, where submissions are sent (the Send To setting) and what the visitor sees after pressing submit.

Framer's help article on adding a contact form lists what native forms do: multiple input types, designed form states, delivery to email, Google Sheets or custom webhooks, and built-in spam protection and rate limiting. Because the form is a normal layer, you style it like any other element, with the same text styles and colours as the rest of your site.

Framer Form Field Types

Native Framer forms support four field types, added from the canvas: text, checkbox, radio and select. Framer's article on adding field types to a native form says you select the form, click the + icon in the bottom toolbar and pick a type; new fields inherit the form's styling.

Field types can only be added on the canvas, not from the Layers panel. Text inputs also come in email, phone and multi-line versions: the published contact forms in our own Framer templates use email and phone input types and a multi-line message box, so the browser shows the right keyboard on mobile.

For styling, Framer's lesson on input variants and validation recommends designing default, focused, filled, error and disabled states as component Variants, and showing errors only after a meaningful interaction.

Where Framer Form Submissions Go

Each form sends its submissions to the destinations you add under Send To: an email address, a Google Sheet or a webhook. You can also skip the native form and use one of Framer's ready-made integration components, or paste a third-party form in an Embed component. The right choice depends on where your team already works.

Framer's help centre has setup guides for HubSpot forms, Typeform and Formspark, plus Marketo. If a form tool isn't on the list, a webhook or an embed almost always covers it.

Framer Form Webhooks

A webhook sends every submission as a JSON POST request to a URL you choose. Framer's webhook setup guide says the JSON uses each input's name as the key and its value as the value, so name your inputs clearly before you connect anything.

• Where: select the form, click Add next to Send To in the right sidebar and choose Webhook. The URL must start with https://.
• Verification: set a secret of at least 32 characters. Each request then carries a Framer-Signature header (a SHA-256 hash of the form data and submission ID, signed with your secret) and a Framer-Webhook-Submission-Id header.
• Keep the secret safe: Framer doesn't show it again after you save, so store it in your password manager first.
• Common targets: automation tools such as Zapier, and enrichment tools such as Clay, which Framer documents in its guide to connecting Framer forms to Clay.

If you run your own endpoint, check the signature before trusting the data, and use the submission ID to ignore duplicates when a request is retried.

Waitlists and Newsletter Signups

For a single email field, such as a waitlist or newsletter box, use Framer's Input component instead of a full form. The contact form article lists four services the Input component supports: Loops, Mailchimp, Formspark and GetWaitlist.

Mailchimp also has its own component. Framer's Mailchimp guide says to copy the form URL from the action attribute in Mailchimp's embedded form code, drag the Mailchimp component from the Forms section and paste that URL into its Form URL field. The component is an email field and a sign-up button, so collect names elsewhere if you need them.

A waitlist page is a landing page with one job. Our guide to landing page design covers the layout around the form: one headline, one promise and the signup box above the fold.

Spam Protection in Framer Forms

Every native Framer form has Basic spam protection switched on by default. Framer's guide to enabling spam protection describes two levels: Basic, which checks for common spam patterns, and Advanced, which adds an AI-powered layer and is available on Pro plans and above.

• Filtering: choose Pass to deliver flagged submissions marked as suspicious, or Block to stop them being delivered at all.
• Timing: changes apply only to submissions received after you publish the site.
• How it works: Framer's explainer on built-in form spam protection says the visitor's device solves a mathematical puzzle in the background, so visitors never type a CAPTCHA.
• No reCAPTCHA: the same article says Framer has no native reCAPTCHA integration.

Start with Pass. Watch what gets flagged for a couple of weeks, then switch to Block once you trust the filter. Real people can still send junk by hand, so expect some manual clean-up wherever submissions land.

Tracking Form Submissions

To count form submissions as conversions, give the form a tracking ID. Framer's article on tracking links and forms says you add the ID when you select the form on the canvas; results then show in the Tracking section of Analytics, which lists your top 20 tracking events.

The same tracking ID works in Framer's funnels and A/B tests. To send submissions to Google Analytics as well, listen for the framer:formsubmit browser event in your site's custom code; it fires when someone submits a form that has a tracking ID.

Hidden fields add context to each submission. Framer's article on hidden fields for form tracking says to add an input, switch on its Hidden property and name it, for example with a value like page-1. Use Hidden, not the Visible toggle: invisible inputs are left out of submissions entirely. Hidden fields don't pick up UTM parameters on their own; that takes a code override.

If your site also needs to rank, our Framer SEO guide covers the page settings that sit around a lead form.

When to Use a Plugin or Embedded Form

Use a plugin or an embedded form when the native builder can't express the form: several steps, questions that appear based on earlier answers, or file uploads. Native forms cover contact, quote and signup forms well; anything that behaves like a questionnaire is easier elsewhere.

• FramerForms: a third-party plugin by Insert Frame and Ryan Hayward that builds on Framer's native forms. Its site lists multi-step forms, conditional logic, file uploads, extra inputs such as ratings and phone numbers, and reCAPTCHA support, sold with one-time pricing.
• Typeform or HubSpot components: worth it when the form data has to live in those tools anyway.
• Embeds: Tally, Beehiiv and other providers give you embed code to paste into an Embed component. The form keeps the provider's look, so match its colours to your site.
• Code components: Framer's contact form article notes you can build a fully custom form as a code component, which suits teams with a developer.

Form Accessibility Checklist

An accessible form has a visible label on every field, the right autocomplete purpose on personal fields, and error messages in text. These come straight from WCAG success criteria, and they also make forms quicker for everyone to fill in.

Before launch, submit a test entry from each breakpoint and confirm it arrives in the email inbox, sheet or webhook you chose, with the field names you expect.

Framer Templates with Forms Ready to Connect

A template saves you the layout work: the contact page, the fields and the success state are already designed, and you only choose where submissions go. These three Waida Studio templates are our own; each has a native Framer form on its contact page, and all three are free on Framer with a free Waida account.

Zelda

Zelda is a dark design agency template with 13 pages. Its contact form is a good example of a structured enquiry: name and email, checkboxes for the services a client needs, budget ranges and where they found you (Behance, LinkedIn, a friend), then a message box. Zelda is free on every platform, Figma file included.

Check out Zelda template

Puchix

Puchix is a 14-page marketing agency template. Its contact form collects name, last name, a required email, an optional phone number and a newsletter checkbox, which shows how to combine a lead form with list consent.

Check out Puchix template

Avande

Avande is a 16-page template for AI and automation agencies. It pairs a contact form with email signup forms elsewhere on the site, so you can see both the full form and the single-field Input pattern in one project.

Check out Avande template

Framer forms cover most sites without any add-on: native fields, delivery to email, Google Sheets or a signed webhook, spam protection on by default and tracking IDs for conversions. Reach for a plugin or embed only when you need steps, logic or file uploads.

To skip the layout work, browse our Framer templates; 24 of them, including Zelda, are free Framer templates with a free Waida account. Every Framer template comes in the Framer Bundle at $159, or you can unlock paid ones with template credits on Waida Pro, from $12 a month billed yearly, and our customisation service can connect and restyle the forms for you from $499.