5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/077g_l9cwe8hz.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ouyrs2yz196q.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/3-tcb9ouhlqkm.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/1p31g3z3kho5v.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/2885u7skzba5_.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/1fo1h_o5odhhk.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v-er0xp5q011.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2rwbpl35w01v4.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/0djs9po3g19ek.js","/creators-assets/_next/static/immutable/chunks/1_ej2mmnwnp37.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0bcmpcsc4ih7d.js"],"PostDetailCard"] 5d:T838,

About

StepFlow adds dynamic multi step forms directly into your Framer projects. Drop it into your contact pages, client onboarding flows, or enquiry sections to give visitors a smooth, interactive submission experience without complex setup.

What it does

Renders a customizable multi step form interface that handles user input across multiple stages. It connects directly to custom endpoints like Zapier webhooks, saves completion progress locally, and includes built in spam traps and submission timer protection against bots. The component supports keyboard navigation, customizable progress displays like outlines or progress bars, automatic redirects, and custom completion messages.

What you can customize

Form & Endpoint Settings: Endpoint URL, save key, retention duration, hidden fields, spam trap, minimum submission time, redirect URL, custom button labels.
Navigation & Progress: Toggle back button, step jumping, keyboard shortcuts, step counters, progress bar or outline mode, percentage indicator, progress saving.
Typography & Styling: Title, body, label, input, and button typography, custom colors for surface, fields, text, muted text, borders, accents, success, and error states.
Layout & Visual Effects: Padding, element gaps, corner radius, drop shadows, ambient glow effects, film grain, and native UI light or dark mode.

Great for

Lead generation and enquiry pages
Client onboarding and intake forms
Multi step survey sections
Contact and feedback pages
Custom service booking flows

Share your build

If you ship something cool with it, post it on X and tag me @Dulajweb or send it over. I would love to see what you create.

Need help?

Questions or feedback? Reach me anytime at dulajdilshan766@gmail.com or on X @Dulajweb.

59:[["$","$L5c",null,{"post":{"id":"019fcda9-eeb5-763b-812b-8261e8999c61","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj dilshan","slug":"dulaj-dilshan-gy7b4j","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132150/avatar-ZgETawWJyCuMuzgHBdPTUADcWJAJWn.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"Xwm21SC9H9xmKmmdg7Wg","resolved":true,"title":"StepFlowForms","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"StepFlow adds dynamic multi step forms directly into your Framer projects. Drop it into your contact pages, client onboarding flows, or enquiry sections to give visitors a smooth, interactive submission experience without complex setup."}]},{"type":"customHeading","content":[{"type":"text","text":"What it does"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Renders a customizable multi step form interface that handles user input across multiple stages. It connects directly to custom endpoints like Zapier webhooks, saves completion progress locally, and includes built in spam traps and submission timer protection against bots. The component supports keyboard navigation, customizable progress displays like outlines or progress bars, automatic redirects, and custom completion messages."}]},{"type":"customHeading","content":[{"type":"text","text":"What you can customize"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Form & Endpoint Settings:","marks":[{"type":"bold"}]},{"type":"text","text":" Endpoint URL, save key, retention duration, hidden fields, spam trap, minimum submission time, redirect URL, custom button labels."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Navigation & Progress:","marks":[{"type":"bold"}]},{"type":"text","text":" Toggle back button, step jumping, keyboard shortcuts, step counters, progress bar or outline mode, percentage indicator, progress saving."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography & Styling:","marks":[{"type":"bold"}]},{"type":"text","text":" Title, body, label, input, and button typography, custom colors for surface, fields, text, muted text, borders, accents, success, and error states."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layout & Visual Effects:","marks":[{"type":"bold"}]},{"type":"text","text":" Padding, element gaps, corner radius, drop shadows, ambient glow effects, film grain, and native UI light or dark mode."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great for"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lead generation and enquiry pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Client onboarding and intake forms"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multi step survey sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Contact and feedback pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom service booking flows"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Share your build"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"If you ship something cool with it, post it on X and tag me @Dulajweb or send it over. I would love to see what you create."}]},{"type":"customHeading","content":[{"type":"text","text":"Need help?"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Questions or feedback? Reach me anytime at "},{"type":"text","text":"dulajdilshan766@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:dulajdilshan766@gmail.com","target":"_blank"}}]},{"type":"text","text":" or on X @Dulajweb."}]}]},"introduction":"Build smart multi step forms","slug":"stepflowforms","author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj dilshan","slug":"dulaj-dilshan-gy7b4j","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132150/avatar-ZgETawWJyCuMuzgHBdPTUADcWJAJWn.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0bce05c0-4760-4da5-b2f4-851230a1db47/019fcda9-c5da-77ee-9abe-78243c78aa4a.png"}],"post":null,"createdAt":"2026-08-04T16:44:53.396Z","updatedAt":"2026-08-31T20:40:07.509Z","publishedAt":"2026-08-04T16:44:53.387Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://stepflowforms.framer.website/","price":"15","paymentUrl":"https://buy.polar.sh/polar_cl_1gYpSfM8ubotdAjn5tKPVS5ogEUrx95VMp8Ed1ZcDFM","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"RICdK2fYCLVipOEeMGgg"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-04T16:44:53.813Z","updatedAt":"2026-08-04T16:44:53.813Z","reported":false}}],"$L5e"]

Suggested for you