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 updates 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

4 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

    1
  • 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?

    1
  • 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

Please sign in to leave a comment.