8 min read
How to Create a Multi-Step Form in Framer
Framer's native form is single-step only. Here's how to add multi-step, conditional logic, and progress tracking natively using Forms Plugin's PageFlow system.
Overview
A Framer multi-step form splits a long form into a sequence of screens instead of one scrolling wall of fields. Native Framer forms don't support this out of the box, you need a plugin that adds step logic, navigation, and progress tracking on top of the form you already built.
Quick Answer
Framer's native form component is single-step only, there's no built-in way to break it into pages. Forms Plugin adds multi-step support through a system called PageFlow: a PageFlow Engine component that wraps your form and tracks step state, plus Navigation Buttons, a Step Indicator, a Progress Bar, and Step Captions you drop in and style natively. Multi-step forms and conditional logic are available on Forms Plugin's Pro plan ($99 one-time, lifetime) and Scale plan ($119 one-time, lifetime), not on the free Basic plan, which is single-step only. Splitting a long form into steps is a well-documented conversion lever: shorter, focused steps reduce the cognitive load of facing every field at once.
Why do multi-step forms convert better?
People abandon forms when the whole thing looks like work before they've started. A 15-field form on one screen signals exactly how much effort is ahead, and a lot of visitors bounce before typing anything.
Breaking the same form into steps changes what the visitor sees first. Instead of 15 fields, they see 3. Instead of "here's everything," it's "here's the next thing." Each completed step also creates a small sense of progress, which keeps people moving instead of closing the tab.
Multi-step forms are commonly associated with completion-rate lifts in the 30 to 50 percent range for long forms, particularly for lead-gen forms, applications, and surveys, the exact cases where a single giant form scares people off fastest.
The effect is strongest on mobile, where a 15-field form on one screen means endless scrolling before anyone can even see the submit button. Splitting it into steps keeps each screen short enough to fit without scrolling, which matters more than it sounds like it should.
How many steps should a multi-step form have?
Somewhere between 3 and 7 steps is the usual sweet spot. Fewer than 3 and you probably didn't need to split the form at all. More than 7 and the step count itself starts to feel like the obstacle, even if each individual step is short.
The right number depends on how naturally your fields group. A booking form splits cleanly into "what you want," "when," and "your details." A job application might need more steps because the fields genuinely span different topics: personal info, experience, availability, and file uploads.
A simple contact-plus-qualification form might only need 3 steps: contact details, what they're looking for, and a final confirmation. A multi-part application form, the kind with resume uploads, references, and availability windows, can reasonably run 5 to 7 steps without feeling bloated, as long as each step is doing real work and not just padding the count.
How do you plan a multi-step form before building it?
Group your fields by topic before you touch the builder. Each step should answer one question in the visitor's head, not just be an arbitrary slice of the full field list.
A practical way to do this: write out every field the form needs, then cluster them the way you'd explain the form out loud. "First I'll ask who you are, then what you need, then how to reach you" naturally becomes three steps. If you can't explain a step's purpose in one sentence, it's probably two steps pretending to be one.
Also decide up front whether any step should be skippable based on an earlier answer. That's conditional logic, and it's worth planning before you build rather than bolting on after.
A common example: step one asks "are you an individual or a business?" If someone picks individual, they skip the entire "company details" step and land directly on the next relevant one. Planning that branch before you build the steps saves you from restructuring the whole flow later, once you realize half your fields only apply to half your visitors.
Does Framer support multi-step forms natively?
No. Framer's built-in form component handles fields, validation, and submission on a single page, but it has no native concept of steps, step navigation, or progress tracking. If you want a multi-step form in Framer without embedding an external tool, you need a plugin that adds that layer on top of the native form.
The usual workaround before a proper multi-step plugin existed was embedding a third-party form tool in an iframe, Typeform or Tally being the common choices. That works, but it means the form no longer looks or feels like the rest of your Framer site, it loads a separate service inside a box, and you lose native styling control over it.
How does Forms Plugin's PageFlow system work?
PageFlow is Forms Plugin's multi-step system, and it's built to work natively inside Framer rather than through an iframe or an external form host. It's made up of a few components you drop into your existing form:
PageFlow Engine: the core component that wraps your form and manages step state automatically.
Navigation Buttons: Next, Previous, and Submit, fully stylable inside Framer like any other element.
Step Indicator: dots, numbers, or labels, whichever fits your design.
Progress Bar: a filled-proportion bar that can match your brand color.
Step Caption: a dynamic "Step 2 of 5" style label that updates automatically.
Conditional Page Jumps: skip steps based on any field's value, with AND/OR rules, so someone who answers "no" to an early question never sees a step that only applies to "yes."
Because it sits on top of the native Framer form, the form stays a real Framer form underneath. Nothing is embedded or hosted externally.
Building a multi-step form in Framer, step by step
Build the form fields first, on a single canvas, using Forms Plugin's field library. Don't worry about steps yet, just get every field onto the page, styled the way you want the finished form to look.
Wrap the form in the PageFlow Engine component. This is what turns a flat form into a stepped one, and it manages which fields are visible at any given moment without you having to hand-build show/hide logic.
Group fields into steps inside the PageFlow structure, following the topic groupings you planned earlier. Keep related fields (like first name and last name) on the same step rather than splitting them across two.
Add Navigation Buttons to each step so visitors can move forward and back. Style Next, Previous, and Submit to match the rest of your form, they're regular Framer elements once placed.
Add a Step Indicator or Progress Bar (or both) so people can see how far along they are. This alone measurably reduces abandonment on longer forms, since visitors can see the finish line instead of guessing how much is left.
Add Step Captions if you want a "Step 2 of 5" style label above each step, useful for longer flows where visitors want to know exactly where they stand.
Set up Conditional Page Jumps for any step that shouldn't apply to everyone, so a "yes/no" answer early on can skip an entire step later using AND/OR rules on any field's value.
Test the full sequence, including every conditional branch, before publishing. Go through the form as every type of visitor your conditional logic accounts for, not just the default path. A skipped step that shouldn't have been skipped is the most common multi-step bug, and it only shows up if you test the branches, not just the happy path.
What does a multi-step form cost in Forms Plugin?
Multi-step forms aren't available on every Forms Plugin plan. Here's what's actually included, current pricing:
Plan | Price | Multi-step forms | Conditional logic | AI credits | Sites |
|---|---|---|---|---|---|
Basic | Free | No, single-step only | No | 3 | 1 |
Pro | $99 one-time, lifetime | Yes | Yes | 10 | 1 |
Scale | $119 one-time, lifetime | Yes | Yes | 15 | Unlimited, plus commercial license and priority support |
If you only need a single-step contact form, Basic covers that at no cost. The moment you need to split a form into steps or add conditional logic, you're looking at Pro or Scale, both one-time lifetime purchases rather than a subscription.
How do you get started with Forms Plugin?
Install it from the Framer Marketplace, it opens from the plugin menu inside any Framer project. You can build and test a single-step form for free on Basic, then upgrade to Pro or Scale when you're ready to add steps and conditional logic. Forms Plugin is built by FramerGeeks, the same team behind FramerGeeks.com's Framer and Webflow development work, so the plugin and the underlying platform patterns come from people who build production sites on both daily, not just a plugin shop.
If you'd rather have someone build the multi-step form for you instead of wiring up PageFlow yourself, get in touch and the same team can handle it as part of a site build.
Bottom line
Framer's native form doesn't do multi-step on its own. If you need one, Forms Plugin's PageFlow system adds step logic, navigation, progress tracking, and conditional jumps natively inside Framer, no iframes, no external form host. Basic stays free for single-step forms. Multi-step and conditional logic start on Pro at $99 one-time, with Scale at $119 one-time adding unlimited sites and a commercial license for agency work.
