Split a Webflow form into several steps — with branching, your own error messages and choice cards.
Form Steps turns an ordinary Webflow form into a multi-step form. It stays a Webflow form: submit, success and error states, Zapier, Make and every integration keep working. Only what happens between the first field and the submit is new.
Once per project is enough, even if you use the solution on several pages: Project Settings → Custom Code → Head Code. The script loads alongside the page without holding up rendering; it runs once the page is in place and does nothing while no fpu attribute is there.
<!-- FlowPowerUser · Form Steps -->
<script defer src="https://cdn.jsdelivr.net/npm/@flowpoweruser/attributes@1/form-steps.js"></script>Every step is an ordinary div block inside the form. You build all steps below each other in the Designer — only one is ever visible. Two ways are common:
Form Block fpu-form-element="form"
└─ Form
├─ Div Step 1 fpu-form-element="step"
├─ Div Step 2 fpu-form-element="step"
├─ Div Step 3 fpu-form-element="step"
└─ Div Button row
├─ Button fpu-form-element="prev"
├─ Button fpu-form-element="next"
└─ SubmitThree to five steps in a fixed order. Two attributes and two buttons, nothing more.
Div Who are you? fpu-form-element="step"
fpu-form-step-id="type"
Div Company data fpu-form-element="step"
fpu-form-step-if="customer=company"
Div Private data fpu-form-element="step"
fpu-form-step-if="customer=private"
Div Submit fpu-form-element="step"Each step gets an ID and a condition. Pick “company” and you see the company steps; pick “private” and they are skipped. Progress and counter automatically use the shorter path.
<form fpu-form-element="form">
<div fpu-form-element="step" fpu-form-step-name="Contact">
<input name="email" type="email" required>
</div>
<div fpu-form-element="step" fpu-form-step-name="Project">
<textarea name="project" required></textarea>
</div>
<button fpu-form-element="prev">Back</button>
<button fpu-form-element="next">Next</button>
<input type="submit" value="Submit">
</form>Two ways lead there, and they can be mixed. A condition on the step decides whether the step is part of the path at all. A jump target on the answer sends the user straight to a specific step. Skipped steps count in neither progress nor counter, are not validated, and their fields are disconnected — so they never reach the submit either.
<!-- Step 2: the choice -->
<div fpu-form-element="step" fpu-form-step-id="choice">
<label><input type="radio" name="goal" value="website"> Website</label>
<label><input type="radio" name="goal" value="shop"> Online shop</label>
<label><input type="radio" name="goal" value="support"> Support</label>
</div>
<!-- Only what matches the answer comes next -->
<div fpu-form-element="step" fpu-form-step-if="goal=website">…</div>
<div fpu-form-element="step" fpu-form-step-if="goal=shop">…</div>
<div fpu-form-element="step" fpu-form-step-if="goal=support">…</div>
<!-- Always last -->
<div fpu-form-element="step" fpu-form-step-id="submit">…</div>Out of the box the solution validates every visible field of the step on next and shows the browser bubble. As soon as you place an error element anywhere in the form, the text moves there — styled in the Designer, visible only when something is wrong. What gets validated still comes from the usual Webflow field settings (required, type, pattern, length).
stepClicking next validates the visible step.<div fpu-form-element="field">
<label for="mail">Email</label>
<input id="mail" name="email" type="email" required
fpu-form-label="your email"
fpu-form-message-required="Without {label} we cannot reply."
fpu-form-message-email="The @ is still missing.">
<div fpu-form-element="error" fpu-form-error-for="email"></div>
</div>Attributes only take effect on the published page — in the Designer the stack of steps stays visible, and that is correct. If nothing happens, fpu-form-logging=“true” on the form helps: the console then reports in one line how many steps were found and how many of them are currently part of the path.
All three use the current path: if a step drops out through branching, it counts nowhere. The elements may also sit outside the form — fpu-form-instance then connects them to the right form.
Webflow can style radios and checkboxes, but it cannot make a whole card clickable or enforce “at least one choice”. That is exactly what this adds. For styled dropdowns the native select stays the form field — combine it with fpu-select (Custom Form Select); focus and error marking then land on the visible trigger automatically.
<div fpu-form-element="group"
fpu-form-group="goal"
fpu-form-required="true"
fpu-form-auto-next="true"
fpu-form-label="a goal"
fpu-form-message-group-required="Please pick what this is about.">
<label fpu-form-element="choice">
<input type="radio" name="goal" value="website" fpu-form-goto="website">
<span>New website</span>
</label>
<label fpu-form-element="choice">
<input type="radio" name="goal" value="shop" fpu-form-goto="shop">
<span>Online shop</span>
</label>
<div fpu-form-element="error" fpu-form-error-for="goal"></div>
</div>falseStore entries and the step reached for the session and restore them on return. Passwords, files and hidden fields are never stored; everything is cleared after a successful submit.falseScroll to the top of the form on every step change. Almost always right for long steps.falseOne line in the console on start: version, number of steps, validation mode.<script>
window.fpuFormStepsConfig = {
persist: true,
scroll: true,
validate: "live",
countTemplate: "Step {current} of {total}",
messages: {
required: "We still need this.",
email: "Please use a valid email address.",
},
};
</script>Enter in a field means next instead of submit, except on the last step. Alt+arrow right and left page through, as long as focus is not in a text field or dropdown. After every change focus jumps to the first field of the new step.