⏱️ TL;DR
- The Core Rule: In any multi-step onboarding flow, Step 1 must create the member using data-ms-form="signup". All subsequent steps must use data-ms-form="profile" to update their custom fields.
- Pattern A: Multi-Page Onboarding (Highly Recommended) — Cleanest and most reliable. Each step is a separate Webflow page. Submitting Step 1 redirects to Page 2, Page 2 redirects to Page 3, and so on.
- Pattern B: Single-Page Slider Onboarding — Sleeker UX. Uses Webflow's native Slider component wrapped in a single Form Block.
- Validation: For the Single-Page Slider, you must use custom JavaScript (or MemberScript #22) to prevent users from sliding to the next step if required fields are empty.
This article starts with a 2-minute video explaining how to set up a custom onboarding form and links to copy or clone an existing onboarding form which you can drop into your project.
Note: The first step in a multi-step signup form creates the member in Memberstack and the rest of the steps update that member.
If you haven't set up a standard profile form, I recommend doing that first.
Here's a link to all of Memberstack's onboarding components.
And here's a link to clone the Generic SaaS Template project.
The Core Concept: Create First, Update Later
No matter which layout pattern you choose, Memberstack cannot save custom field data to a member who does not exist yet.
- Step 1 (The Signup): Must collect the email and password, or passwordless log-in, (and optionally plans/metadata). This form uses data-ms-form="signup". Once submitted, the member is authenticated.
- Steps 2+ (The Profile): Collect custom details (e.g., Company Name, Role, Bio). These forms use data-ms-form="profile". Because the user is now logged in, Memberstack automatically attaches this data to their active profile.
Pattern A: The Multi-Page Approach (Easiest & Most Reliable)
This is the easiest pattern to build and debug. Each step of your onboarding is a distinct page in Webflow.
Step-by-Step Setup:
-
Page 1 (/signup):
- Add a Webflow Form Block.
- Add the attribute data-ms-form="signup" to the Form Element.
- Set the form's 'Redirect' settings to 'Page and select your Step 2 page from the Page dropdown.
- Include input fields for Email and Password in the sign-up form.
-
Page 2 (/onboarding-step-2):
- Add a new Form Block.
- Add the attribute data-ms-form="profile" to the Form Element.
- Set the form's 'Redirect' settings to 'Page' and select your Step 3 / Dashboard page from the Page dropdown
- Add input fields in the form for your custom fields (e.g., data-ms-member="company-name").
- Repeat for as many pages as needed.
Why this is great:
- If a user drops off at Step 2, they are still a registered member! You can email them a link to return to /onboarding-step-2 to finish their setup.
- Webflow's native HTML5 validation works perfectly out of the box on each page.
Pattern B: The Single-Page Slider Approach (Sleeker UX)
This pattern keeps the user on a single page and uses custom styling and code to show the user one step at a time.
Step-by-Step Setup:
- Add a standard Webflow Form Block to your page.
- Add a Div Block inside the Form element for each step that you want to create.
- Create the input fields inside each Div Block as required (for e.g. Email, Password, First Name, Last Name)
- Add 'Previous' and 'Next' buttons in each Div block to let users go back and forward while filling up your form.
- Set the display property to 'None' for all the Div blocks except the first one.
- Use #197 memberscript to setup all the custom attributes and code required for this functionality and to finish setting up your multi-step form.
P.S. You can refer to this cloneable to double-check if the entire setup is perfect on your site as well.
The Gotcha with Single-Page Multi-Step Form:
Because there is only one form visualized as multi-step for users, Memberstack does not receive any data until the user clicks the final Submit button on the very last step.
The Risk: If a user closes the browser on Step 2, you collect zero data. They are not registered, and you do not have their email.
The Solution: If you want to register them on Step 1 and update their profile on Step 2, you cannot wrap all the steps in a single form. Instead, you can split the form setup into just two pages.
1. Page 1: Place a Form Block with the attribute data-ms-form="signup" inside this page and collect user's Email and Password.
2. Page 2: Place a Form Block with the attribute data-ms-form="profile" inside this page and follow the Single-Page Approach for the remaining onboarding steps (i.e. to collect the user's response for custom fields like First Name, Last Name).
When the user submits the form on Page 1, Memberstack creates the member. When they go to Page 2 and fill up all the steps you created and submit that form, Memberstack updates their profile seamlessly.
Memberscript #195: Custom Input Validation &
MemberScript #197: Multi-step Form Submission Handling
Memberscript #195 helps you to handle custom input validation if you want to validate and show error messages in real-time.
Memberscript #197 helps you validate and avoid this issue via custom code and you can find everything in that linked resource - tutorial, cloneable, custom code etc.
Validation Patterns & Best Practices
1. Style Invalid Inputs
When a user attempts to proceed with invalid or missing data, you should visually flag the error. Use this simple CSS in your global styles to highlight fields that fail validation:
2. Custom Password Strength Validation
If you want to ensure users create secure passwords on Step 1, you can use our custom validation pattern to check for length or special characters:
❓ Frequently Asked Questions (FAQ)
Q: Can I use data-ms-form="signup" and data-ms-form="profile" in the same form element?
No. A Webflow form wrapper can only have one data-ms-form attribute. If you try to combine them, Memberstack will get confused and default to the signup behavior, ignoring the profile updates.
Q: How do I pre-fill fields if a user returns to complete their onboarding later?
If you are using Pattern A (Multi-Page), Memberstack automatically pre-fills any inputs with data-ms-member="[field-name]" with the member's saved data if they are logged in. When they land on Page 2, they will see their previously submitted information.
Q: What happens if a user submits Step 1, but closes the tab on Step 2?
If you use the Multi-Page Form setup shared in this article, then they are a fully registered member! When they next log in, you should use a redirect rule or a custom script like our Memberscript #71 to detect if their custom profile fields (e.g., company-name) are empty. If they are, redirect them back to /onboarding-step-2 to complete their profile.
Comments
7 comments
Am I correct in seeing that each step has to have its own page? Are there any other ways to do this which don't count against our page limit?'
Thanks
MJ Petroni you can also use custom scripts + link parameters to keep everything on one page. Here's how it could work at a high level:
You could probably also use Formly for us.
Am I also able to use a multistep onboarding forms to signup?
Oliver Sienel You will need to start with a signup form (email/password, social auth, passwordless, etc.), and then you can link that form to a multi-step onboarding form. That way the account is created in step 1. It's possible to create the member in a future step, but you will need to use custom code. Reybot can help with that.
Is it possible to have a multi step form span across tabs in webflow so everything stays on one page?
This memberscript almost works https://www.memberstack.com/scripts/31-open-a-webflow-tab-with-a-link
If you're comfortable with AI tools you can have them modify it to work. Otherwise, I'll see if the team has time to make some modifications...
Right now it submits the form, but the submit button gets stuck in the "loading" state. So there's no way to update a part that's already been completed. Maybe that's okay though? You could change the loading text to "Saved" for example.
Hey everyone!
We published a Memberscript that makes multi-step onboarding simpler without having to redirect users to another page.
Memberscript #171 – Multi-Step Onboarding with Auto Tab Navigation.
Each time a member submits a form inside your Webflow tabs, they’ll automatically be taken to the next step. On the final step, you can either redirect them to a page of your choice or trigger a custom event.
👉 Grab the code here: https://www.memberstack.com/scripts/multi-step-onboarding-auto-tabs
👉 Clone the Webflow setup here: https://webflow.com/made-in-webflow/website/multi-step-onboarding-auto-tabs
Please sign in to leave a comment.