Multi-step form for Webflow
Turn any Webflow form into a smooth, guided multi-step experience. All with one script, zero dependencies, and no custom code required.
Webflow's native forms are single-step by default. There's no built-in way to break a form into multiple stages, validate fields before advancing, or show users their progress - without writing custom JavaScript or relying on third-party tools that add bloat, cookies, and monthly costs.
The Fractional Multi-Step Form Kit solves this with a single, lightweight script and a set of custom attributes you apply directly in Webflow Designer.
Here's what you need to know:
- This solution works by adding custom attributes to your existing Webflow form elements — no JavaScript knowledge required, and no changes to how Webflow handles form submissions.
- Your form still submits natively through Webflow, which means all your existing integrations — Zapier, Make, Airtable, or Webflow's built-in form notifications — continue to work without any additional setup.
- The script identifies your step wrappers, next/back buttons, and optional progress elements purely through attributes. You retain full control over layout, styling, and interactions inside Webflow Designer.
- Validation runs on a per-step basis before advancing, so users can't skip required fields — but you never have to write a single validation rule manually.
- The kit is fully GDPR, CCPA, and PIPEDA compliant. It sets no cookies, makes no external requests, and collects no data of its own.
Add this <script> inside the <head> tag of your page or project
This script is the universal script: you only need to include it once, even if you have multiple instances on the page.
<!-- This script is to create a Multi-Step Form - Managed by Fractional Creative -->
<script data-fc="multistep-form" data-fc-version="1.0.0" data-fc-consent="essential" src="https://cdn.fractionalcreative.io/kits@1/kits.js"></script>Build your form as usual
On your website, add a form to your page and build all of your fields inside it as you normally would. Include every field from every step. Do not worry about the steps themselves yet. Your form should look like one long form at this point.
Add these required custom attributes to the elements
Without the Kit
With the Kit
Everything you’re probably wondering.
Need more than a Webflow Kit? Hire a Digital Agency.
Fractional Creative is a digital agency. We build Webflow websites, design brands, manage Meta and Google ad campaigns, and build custom automations, and more. Start saving with Fractional services.
