Page Breaker (Pro feature)
Last updated
Last updated
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.
After adding the Page Breaker element to your calculator, at the top of the calculator you will get Page Breaker Element Settings:
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:
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
Show summary block on the last page of the multi-step calculator is OFF
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
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
After configuring the settings, do not forget to click the Save button to apply the changes.
IMPORTANT After deleting an element that had an Action configured in the Page, you must re-save the Page. Otherwise, the Next button won't work on the front end.
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.
Use the drag & drop feature to add the Page Breaker element to the place where you want to separate the elements:
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:
We will customize the Page Breaker Settings:
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:
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.
Let's add one checkbox field to the first - Pizza page, and add an option called 'I don't want drinks':
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!
