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.
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.
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.
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.
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.
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 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.
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."
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.
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.
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.
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.
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.
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.
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
Questions, feedback, or feature requests? Reach out anytime at luis@kantorlab.de. I will answer your message!
Luis Kantor
