Dividing a Calculator Into Steps (Multi-steps)

The Multi-steps feature allows you to create a survey-like calculator by placing specific elements into different steps (or pages).

Multi-steps can be added to a calculator via the Add New Element dropdown menu.

1. The Progress bar options allow you to choose how the steps progress will be shown visually - none, line, dots or text.
2. The Transition animation options determine the animation effect when switching from one step to another.
3. The Step height options allows you to choose the desired steps height. Explanation of each option are provided in the tooltip.
4. To add a new step to the element, click the + Add step button under the Step list title.
5. Click the step to expand its settings; which include:

• Changing the Step Title – the text that will be displayed at the top of the step (it can be turned off).
• Giving more context to the step or providing instructions with the Step tooltip. Once text is added, it will appear as a small info icon next to the element title.
• You can change the order of the steps you added to your multi-steps element by clicking on the arrows on the right side of each step.
• Specify the Next, Back and Start over button text - it will appear on the buttons used to navigate the multi-steps.
• Deleting a step by clicking the Delete step button.

How to add an element into a specific step?

Each element, such as Input Fields or Formulas, has to be moved to the step separately. That can be done via a separate setting accessible via a ‘Move element’ icon at the top.

In order to place the element in to a group/step, follow these steps:

1. Click on the element you wish to add.
2. Click on Move element.
3. Click on the place where you want the element to be moved. You can choose a specific group or a specific step in the multi-steps element.
4. Checkmark icon will indicate that the element was moved to the desired place successfully.

For more information and tips about this process, check out this article 🔎.

Styling the Multi-steps

You can customize the Multi-steps element background as well as adjust the padding.

Navigation button customization is available in the Custom settings of the element. Progress bar can also be customized via the Custom settings.

Tips

• Deleting a step does not delete elements in it - elements return outside the frame.
• Multi-steps element height is determined by the elements in it and their height. A fixed height is used across all steps which is determined by the step - with the biggest height.
• The first and the last steps are available by default and not removable.
• The pink frame around the Multi-steps element indicates the border of this element and will not be visible outside the editor.
• Only one Multi-steps element can be added to the calculator at a time.