Create a Multi-step Onboarding Form in Webflow

Article author
Duncan Hamra

This article includes 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. 

Was this article helpful?

Comments

7 comments

  • Comment author
    MJ Petroni

    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

    2
  • Comment author
    Duncan from Memberstack

    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:

    1. Add all your forms to the page and give each an ID.
    2. Write (or ask an AI to write) a script that sets the forms to display none by default. When the ID is present in the URL (either #FORM_ID or ?FORM_ID) set that form to display. 
    3. And then set the redirect link for each form to refresh the page and target the next form in the list. 

    You could probably also use Formly for us. 

    0
  • Comment author
    Oliver Sienel

    Am I also able to use a multistep onboarding forms to signup?

    2
  • Comment author
    Memberstack Team

    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. 

    0
  • Comment author
    Lauren Krailo

    Is it possible to have a multi step form span across tabs in webflow so everything stays on one page?

    0
  • Comment author
    Duncan from Memberstack
    • Edited

    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. 

    0
  • Comment author
    Magnaem from Memberstack

    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

    0

Please sign in to leave a comment.