In our existing signup flow, we ask users to provide their email address and create a password, and then we also ask for various bits of personal information to display on their profile.

In our multi-stage flow, we are going to separate the onboarding flow so that the initial signup fields (email & password) are in the first stage, and the profile related fields (first name, last name, and username) are in the second stage.

To start, make a copy of your signup page and name it ‘Create Profile’. On this page, delete your existing sign up form, and paste in the Unstyled Profile Form Memberstack component in its place.

Next, adjust the default fields to match the input fields that we want shown. First Name and Last Name already exist by default, so all we need to do is change the default ‘Phone’ field to a ‘Username’ field. This is easily accomplished by renaming the field label to ‘Username’, and changing the field’s custom attribute to data-ms-member=”username”.

Now we can navigate back to the initial signup form and delete the username, first name, and last name fields so that the only fields that remain are email and password.

Your ‘Create Profile’ and 'Create Account' forms should now look like this: