Page Breaker (Pro feature)

The Page Breaker element is a Pro feature of the Cost Calculator Builder plugin that allows you to create step-by-step (multistep) calculators. Instead of showing everything at once, this element helps break down the calculator into multiple pages, making it easier for users to navigate the steps.

The look of the multistep calculator

Page Breaker Element Settings

After adding the Page Breaker element to your calculator, at the top of the calculator you will get Page Breaker Element Settings:

Element tab

• Navigation Style - select the style of the navigation

• Hide page title in navigation - enable the setting to hide the title of the pages in your step-by-step calculator

You can see how it will look using the Style Preview section of the Element settings tab.

Here are the available Navigation Styles:

Circle steps with line

Circle Tabs

Rectangle steps with line

Rectangle tabs

Progress with circle

Progress with bar

Hidden

Page navigation will be entirely hidden.

Settings tab

• Show summary block on the last page of the multi-step calculator - The setting will be applied only when a calculator is built with a Page breaker

• Show total summary - There will be a button on the bottom of each step for users to click and open a popup with Summary

• Total field element - choose the total field formula(s) to be displayed at the bottom of every page when the Show Total Summary option is on

Total Summary separated

Show summary block on the last page of the multi-step calculator is OFF

Total Summary on last page

Show summary block on the last page of the multi-step calculator is ON

Total Summary on every page

Show summary block on the last page of the multi-step calculator and Show total summary settings are ON

Ensure you have chosen totals to display on the Total Field Element setting.

If you click on the Show Summary, the Total Summary of your order will be opened in a pop-up:

Page Settings

Once you add a page breaker to your calculator, the calculator will be divided into two pages at the location where you placed the element. You can then add additional page breaker elements to create more pages.

---

• Page Name - enter a title for the page for easy identification

• “Previous” Button Label - customize the text for the button that users will click to go back to the previous page (e.g., "Back").

• “Next” Button Label - customize the text for the button that users will click to proceed to the next page (e.g., "Next").

• Page Box Style - choose the style for the page box. Available options include Full Width, which expands the page breaker to the full width of the form, and 2 Columns which will split the page into two columns

Full Width

2 Columns

Conditions

The Conditional Logic feature in the multi-step calculator allows you to create dynamic, responsive forms and calculators that adapt based on user inputs. This feature lets you define specific conditions under which the calculator will skip to a different page or jump to a particular step. By doing so, you can create a more streamlined and efficient user experience, ensuring that users only interact with the parts of the calculator that are relevant to them.

• Choose one of the All or Any options first.

  • All - the action will be performed only if all conditions are true

  • Any - the action will be performed if one (any) of the conditions is true

• Element - choose the element which condition will be applied

• Condition - choose the condition option (varies by element)

• Value - indicate the value of the condition

• Add new - use the button to add a new condition

• Action - select the action that will be executed once the condition is true

  • Skip next page - skips the next page in a sequence

  • Do not skip next page - button 'next' will be disabled, so the user can not skip the page

  • Jump to - directly jump to the selected page

Example usage of Condition

After configuring the settings, do not forget to click the Save button to apply the changes.

Example Usage of Page Breaker

This element is particularly useful in scenarios like booking processes, where users need to fill out multiple stages of information, such as order details, personal details, and confirmation steps. By breaking these into separate pages, you can create a logical flow that guides users smoothly through each step. Now, let's see how to upgrade the Pizza Ordering calculator using these principles.

1. Use the drag & drop feature to add the Page Breaker element to the place where you want to separate the elements:

2. We will divide this calculator into three pages: Pizzas, Drinks, and Delivery. After the first step, we have two pages. Now, we will add another Page Break then move the Delivery Location, Select the Branch Geolocation fields and Total to it:

3. We will customize the Page Breaker Settings:

4. Customize the navigation style according to your needs from the Element tab, then move to the Settings tab and enable both two settings (so our total summary will be displayed at the end of the calculator as a separate page), indicate the total formula to show:

5. Change the page names accordingly one by one:

• Page #1 -> Pizzas

• Page #2 -> Drinks

• Page #3 -> Delivery

You can also modify the Back and Next button labels and Page Box Style according to your needs.

6. Let's add one checkbox field to the first - Pizza page, and add an option called 'I don't want drinks':

7. In the Pizzas page settings, add a condition. Set these parameters accordingly:

• Element: "I don't want drinks"

• Condition: 'Is selected (option)'

• Value: 'I don't want drinks'

• Action: 'Jump to' (alternatively you can also select 'Skip next page')

• Page: 'Delivery'

With these settings, once the user checks the "I don't want drinks" option, the calculator automatically moves to the delivery page (or skips the next - Drinks page).

Here is the result:

Later you can upgrade this calculator using the Repeater field according to your needs.

Good job, you have done it successfully!