Create multi-step signup flows

Using Memberstack 2.0? There is an updated version of this article here.

Avoid overwhelming new members and improve conversion rates by creating a multi-step signup process to onboard users.

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.

What 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 can 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 sign up 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 the paid membership in Step 1, and 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 sign up 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, i.e. Signup → Collect Info → Select a Plan. Tip: This also doubles as a "Cart Abandonment" feature.

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