Multi-Step Popup Help


Im attempting to edit a multistep popup form on one of my pages. The documentation is a bit limited and im trying to understand how its working behind the scenes to get a better idea of how to edit it to my needs.

  • Where do you adjust the height of the pop up? Is this done on the main container, or each individual tab? I have some tabs that need to be larger/smaller than others.

  • How do you remove or edit a tab? Is there a place to adjust how many steps there will be (default 5)?

  • In regard to the initial date source, the documentation notes the sum of all the steps should equal 100. This isn’t the case in the default settings. It seems the number should reflect the percentage of completion relative to the entire form. For instance, the first tab is 20% of completion, the second tab is 40% completion…and the finally the last step is 100% completion.

  • How do you ultimately save data from the form? Since you are using the same button in different states, where do you place the saving aspect in the work flow. Also how does the ‘saving’ tab work when there is still a next tab to bring you to completion?

Thank you in advance!

1 Like

Hi @thom! :slight_smile: Thanks so much for your message! Glad to provide more information on the multistep popup:

The popup’s height automatically resizes based on the number of visible inner groups within the multistep popup. By default, the multistep popup element contains 5 collapsible group tabs. Each group tab has a conditional that shows that group when the var - progress bar %_number's value is equal to a specific number. This var - progress bar $_number variable is also used to change the completion percentage of the progress bar at the top of the popup.

For example, the var - progress bar %_number shows each collapsible group conditionally (e.g., Group Collapsible tab 1_number is visible when that variable is 20, Group Collapsible tab 2_number is visible when that variable is 40, Group Collapsible tab 3_number is visible when that variable is 60, etc.)

The number value of this group can be changed by using a display data action. For example, if you want to show the second group, the display data action could display 40% in the var - progress bar % element.


The values on each collapsible group are 20, 40, 60, 80, 100 by default (since there are five groups), but these numbers can be changed if you add or remove groups. For example, if you need only 4 groups, you can change each collapsible group’s conditional values to 25, 50, 75, 100.

To edit a tab, you would edit the UI within the editor and/or edit the conditionals on each collapsible group. If you don’t plan on using one of the tab groups, the conditional on that tab group can be deleted so that that group is hidden at all times.

To add more steps, you would need to copy+paste a collapsible group within the popup, make sure the collapsible groups are vertically stacked, and then adjust the conditionals to support the new number of steps (e.g., 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 would support 10 collapsible groups)

Ah, got it! This meant to say that the last step should always equal 100% (to ensure that the progress bar is completely filled on the last step), but all previous steps should be equal to:

[current step number]/[total number of steps] * 100

All steps before the last step don’t need to exactly equal that, but dividing the values somewhat evenly in that way ensures the progress bar’s completion percentage increases proportionally as the user completes each step.

For this functionality, you would create multiple workflows for the Button Next Step element, and specify only when conditions on the workflow so that the action is performed right after a user enters information in the currently visible group. For example, the first collapsible group’s “Next Step” workflow could be:

When Button Next Step is clicked (*only when Group Collapsible 1 is visible) →

  1. Include an action that saves this data (if data is saved as the user completes the form)
  2. Add a display data action that displays the number value of the Group Collapsible 2 tab in the var - progress bar %_number element. This action will hide the first group and show the second group because of the conditional on the first and second group.

That should allow for a custom multistep setup, but please let me know if you have any questions!

Thanks again, Thom!

1 Like

Hi I would like to know that how we can edit multi select popup. I would like to change the default position to left side of page instead of being in center. Is there a way to edit position?thanks

Your quick response will be very helpful.

Hello @devapp.hicham welcome to the forum!

Please consider that the centered position of a popup element is a default Bubble function.

All popups are centered.