5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T1b5a,

Long forms scare people off. Stepform turns intimidating one-page forms into friendly, step-by-step experiences that users actually complete. Choose from 5 ready-to-use presets or build your own with 13 field types, smart validation, and direct webhook or email integration.

100% no-code. Native Framer fonts. Pixel-perfect customization.

Why Multi-Step Forms Convert Better

Long forms feel like work. Multi-step forms feel like progress. By breaking a big form into smaller, focused steps, you reduce cognitive load and dramatically improve completion rates. Stepform brings this proven UX pattern to Framer as a single drop-in component — no templates to wire up, no external services to learn, no code to write.

5 Ready-to-Use Presets

Drop the component on your canvas and instantly get a working form. Every preset is fully editable, fully styled, and ready to ship:

Contact Form — Classic contact form with name, email, message, and privacy consent.
Event Inquiry — Multi-step event venue inquiry with contact details, event info, space requirements, and summary review.
Newsletter — Minimal one-step opt-in for email signups with privacy consent.
Job Application — Three-step application form covering personal details, experience, and motivation.
Quote Request — Two-step form for collecting project briefs and contact information.

Want something different? Switch to Custom mode and build your own form from scratch with up to 10 steps.

13 Field Types

Text, Email, Phone, Number, Textarea, Select Dropdown, Radio Buttons, Multi-Select Chips, Checkbox (with markdown link support), Date Picker, Range Slider, Star Rating, and Visual Divider.

Every field type comes with smart, type-specific property controls — you only see the settings that actually apply to your chosen field. No clutter, no confusion.

Smart Field Pairing

Set any two compatible fields to "Half" width and they automatically pair on the same row. Perfect for First Name + Last Name, City + ZIP, or any two-column layout — no manual grid configuration needed.

Auto-Generated Summary Step

Toggle "Show Summary" on any step and it automatically displays a clean, formatted review of everything the user filled out in previous steps. Perfect for the final confirmation step before submission — no manual templating required.

Three Submission Modes

Three ways to handle form submissions, configured in seconds:

Demo Mode — Logs submissions to the browser console. Great for testing and design reviews.
Webhook — POSTs the form data as JSON to any URL. Works seamlessly with n8n, Make, Zapier, your own backend, or any HTTP endpoint.
Web3Forms — Sends submissions directly to your email inbox using a free Web3Forms access key. No backend, no signup hassle, just paste your key and start receiving emails.

After successful submission, optionally redirect users to a thank-you page, or show the built-in success screen with a personalized greeting.

Personalized Success Screen

Use {name}, {email}, {phone} or any field label as placeholders in your success message — they're automatically filled in with the user's input and highlighted in your accent color.

Smart name detection prefers "First Name" over a generic "Name" field, so users always see their first name in the greeting. Empty tokens are gracefully removed, so your success message never ends up looking broken.

Example: "Thanks, {name}! We'll be in touch at {email}." becomes "Thanks, Jane! We'll be in touch at jane@example.com."

Complete Design Control

Native Framer Font Picker

Two font controls (Title + Body) using Framer's native font picker. Pick any font from your project, set weights and sizes, and the entire form automatically scales to match your visual hierarchy.

Full Color System

Nine independent color controls: accent, background, text, subtitle, input border, input background, error, progress track, and category label. Every color has a clear description so you know exactly where it's used.

Customizable Back Button

The Back button has its own dedicated style controls — background, border color, border width, text color, and hover background. Build a ghost button, an outlined button, or a filled secondary — completely independent from the Next button.

Layout & Spacing

Fine-tune every detail: container radius, input radius, button radius, input border width, input padding (horizontal and vertical), label gap, field gap, container padding, button gap, and more. 13 layout controls, all documented with helpful descriptions.

Subtle Animations

A clean CSS-based fade between steps that you'd barely notice — exactly enough to feel polished without being distracting. Toggle on/off with a single click.

Built for Production

iOS-safe input sizing — Inputs use a minimum 16px font size to prevent unwanted zoom on mobile Safari.
GDPR-friendly checkbox — Built-in privacy consent checkbox with markdown link support for privacy policies and terms.
Smart validation — Required fields, email format, phone minimum length, and selection requirements. All error messages are fully customizable.
Auto-hide progress bar — Single-step forms automatically hide the progress bar (where it would always show 100%).
Live canvas preview — See your changes instantly on the Framer canvas, no preview mode needed.
Show/hide button icons — Toggle the arrow icons in Back / Next buttons with a single click.
Inline help everywhere — Every single property has a description right in the Framer panel. No documentation tab-switching required.

Perfect For

Contact and inquiry forms
Lead generation funnels
Event venue inquiries
Job applications
Quote requests
Newsletter signups
Customer surveys
Onboarding wizards
Booking forms
B2B sales qualification

Support

Questions, feedback, or feature requests? Reach out anytime at luis@kantorlab.de. I will answer your message!

5a:[["$","$L5d",null,{"post":{"id":"019dafc7-01df-7804-9cc9-68dfb41d5930","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0272fa6c-0782-4049-a808-420b119150a3","name":"Luis Kantor","slug":"luiskantor","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0272fa6c-0782-4049-a808-420b119150a3/3vb42v80","badges":["available","pro","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"S05wvMscRQE8AXaP2wnD","resolved":true,"title":"StepForm","body":"$5e","bodyJson":null,"introduction":"Multi-step forms with presets & webhooks","slug":"stepform","author":{"framerUserId":"0272fa6c-0782-4049-a808-420b119150a3","name":"Luis Kantor","slug":"luiskantor","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0272fa6c-0782-4049-a808-420b119150a3/3vb42v80","badges":["available","pro","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/S05wvMscRQE8AXaP2wnD/stepform-JuIhjgwZoCC3VLPadcdESYgDYDFG8A","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-13T08:44:09.414Z","updatedAt":"2026-04-21T11:22:26.165Z","publishedAt":"2026-04-21T11:22:28.191Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://stepform.framer.website/?editSite","price":"9","paymentUrl":"https://contra.com/products/SK2zmdS5-step-form-framer-multi-step-forms-with-presets-and-more","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"1dVOdCteYY3purb91OhX","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-21T11:22:28.191Z","updatedAt":"2026-04-21T11:22:28.191Z","reported":false}}],"$L5f"]

Suggested for you