How to add more steps for sign up

Hi,
How do I add more sign up steps to the default sign up process in Canvas? There are placeholders but we would like to divide information gathering to multiple steps (7+) before sign up for user experience.

Thanks

Hello @broker welcome to the community!

Wow! … A 7 step on boarding experience. It can be done in Canvas and you will have to work the logic and definitely the user interface adding blocks of inputs to achieve it.

As for the logic, the key would be to understand where to add these steps. A video and a link to all the sign up instructions can help, which I will post below.

Key aspects in the video are:

Min 2:45 - Continue to step 2.
Min 5:45 - Trigger complete sign up. This ultimately tells the app that the user completed his signup by saving a date field to the user as to when they completed the signup
Min 13:00 - This is a wrap up of step 2 and the “fork” to step 3 for email verification or not. This is where more steps beyond just 2 steps can be added for taking your on boarding experience to 7 steps and then continue to now a step 10 “fork” (priorly step 3 … but now step 10) to email verification or not .

As for the UI, you will notice in the video that there are 4 content groups within the sign-up group. You will have to create a large enough space to fit in you remaining 5 steps (2 of the existing 4 are for actual on boarding… so you have 2 of 7 now). For this you will have to move down all the content groups below the big signup content group. Enlarge the big signup group to accommodate your 5 new step-groups.

Hope this helps and good luck with your project! :smiley:

1 Like

Thank you for your guidance. We got it working with 7 steps. There are a couple of issues we are trying to solve:

  1. Abandoned sign-up process. How do we force users to return to the abandoned sign-up step? Let’s say a user starts signing up and abandons further steps after step 6. At this stage, a user hasn’t verified email yet since email verification happens at the end. So, instead of filling in all details again, we would like users to pick up where they have stopped.

  2. Lock access if a sign-up process is incomplete. How can we lock access to the dashboard for a user until all sign-up steps are complete?

  3. Too many redirects. When a user completes email verification and clicks “Continue”, a user is supposed to be redirected to the dashboard page (created specifically for users). However, it throws a “too many redirects error” when the “Continue” button is pressed.

Your help would be much appreciated.

Hello @broker !

  1. One way would be to make sure that the “date signup completed” field in the user object be empty until the new user has fully completed the onboarding process. Build a check during login for this so that all users without a filled-out “date signup completed” field be redirected back to the login page at the step number they left.
  2. Same as above.
  3. When user roles and the onboarding process is modified in a Canvas template … the redirection logic is changed. This is fine since you are tailoring the template to the vision that you have for your app :smiley:. The “little” challenge that comes after that is to adapt the redirection logic to the new logic that you have added. Especially considering the types of changes to onboarding that you have implemented. For this what I would do is create a new sandbox app in my Bubble account using the free Canvas template. I would then study to the point that I understand the redirection logic it comes with. The video above does not cover some flows that also aid in the redirection logic for user roles that are placed in the header reusable element. So, I would re-watch the video, re-read the signup & login how-to document, understand the role the index page plays as a “traffic cop” and experiment with the sandbox app to understand how redirection works. And … apply any adjustments to my new app so that redirection happens in the logical way needed.

Thanks for your response. Would you be able to show how to return to the abandoned sign-up step using the original canvas sign-up onboarding (3 steps)? Let’s say the user entered only email and passwords and abandoned filling in the first name and last name in Step 2. So, how do you force the user to return to Step 2 to continue sign-up when he/she tries to log in.

Thanks for your help!

@broker

Create a sandbox app using the free standard Canvas template.

Sign a user up and do not complete step 2 (name and last name)

From the editor run as admin which should take you to the admin page. Log out.

Try logging in with the incomplete user and you will see how you are taken not allowed to log in and are taken to step 2 of the sign up process.

Using the debugger study what happens and study the redirection logic on the index page, header element, current user roles and which are included in which options sets called “Bubble pages”. All of this makes up the redirection logic.

One quick way is to add each of your additional on boarding steps one by one in this sandbox template and test behavior each time. You do not have to redraw the UI for this testing/ learning. Just see how things behave and then compare with your app and eliminate anything that may be disrupting the default logic. Of course, you can always add new logic if you want.

Thank you for your advice! I have created a sandbox app to check how redirection logic works. I have used step by step debugger too. However, in the sandbox environment when a user abandons sign up before proceeding to Step 2 and then tries to log in, it always redirects to step 1 of the sign-up process rather than to step 2 as per your advice. I haven’t changed anything in the sandbox app. Am I missing something?

This video was super clear. ls there a link to over videos? I may have missed that post

@raynellbell

Yeah they are very well made. Matt is doing an awesome job!

For more click below :grinning:

Hi @broker !

The user is brought back to step 1 because that is as far as the user got to. Since info on first name and last name was not provided the user never made it to step 2.

The above is the default Canvas logic as there are only two steps there.

Given that you have added more steps you can decide how to manage it for your own app.

The key is to save the step number to which the user got to in the field “step” in the user object. And ensure the logic shows/hides the content groups accordingly (i.e. extending the Canvas logic to your added on boarding steps).

I got it all working. The trick was to update workflows for popup signup/login element. Thanks for your help. I finally mastered multi-step onboarding using the canvas template.

1 Like