About this article:

  • Difficulty level: Easy
  • Technical background needed: Beginner
  • Estimated time required to complete: 30 mins

This feature is available on site-builders that support data attributes.

Why and Why?

Let's say you want to collect lots of information from new signups, but you don't want to cram all of those fields into one form. This article will show you how to build your own multi-step onboarding flows like this HTML/Webflow Template.

Things you'll need:

  • A regular signup form.
  • A membership that redirects users to the onboarding process after signup.
  • A page on your website for each step of the onboarding process.

1. Create a signup form

The first thing you need is a basic Memberstack signup form. For this, you can use the default sign up modal or you create your own custom signup form. The form will collect the user's email address & password, and then redirect them to the second step in the onboarding process. You need to specify a different "Page after signup" redirect for each membership on the memberships page.

2. Design your onboarding process

Each step of your onboarding process will need its own page. On each page, you'll want a form with a submit button, a success redirect, and the following attributes:

  • The <form> should have the data-ms-form="profile" attribute.
  • The <form> should redirect to the next onboarding page after submission.
  • And each <input> should have a data-ms-member="value-from-MS" attribute (more on this in the next step).

Tip: You have total design control over these pages, but a progress indicator is strongly recommended to keep members from feeling lost.

It's also important that each form links to the next. Depending on your site builder of choice, you may need to set the redirect using the redirect="/folder/page" attribute.

A redirect is required to move on to the next step/page.

3. Add your custom fields to Memberstack

Create a custom field in Memberstack for each field on your site. Each field will have its own data-ms-member attribute that you'll need to add back to your website. 

Note: By default, custom fields will be visible and editable in a member's profile. You can hide custom fields if you don't want that to happen.

4. Test & troubleshooting

Take some time now to signup as a test member and see what happens 🤞If you have some trouble, there's a good chance the bullets below will help.

5. (OPTIONAL) Payments

You can collect payment information at any point in the signup process.

Collect payment at the beginning of the process → Use paid membership in Step 1 abd then the checkout will occur right after signup. (Note: an account will not be created until checkout is complete.)

You can collect payment at the end → First, ask members to signup for a free membership and then include a signup link for a paid membership later in the signup process. The signup link should be its own step, ie. Signup → Collect Info → Select a Plan. Tip: This also doubles as "Cart Abandonment" feature.

Keywords: multi-step, signup, flow, payments form, onboarding, process, redirects, membership

Did this answer your question?