# Page Breaker (Pro feature) {% embed url="" %} 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.

## 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 {% hint style="success" %} You can see how it will look using the **Style Preview** section of the **Element** settings tab. {% endhint %} Here are the available **Navigation Styles:** {% tabs %} {% tab title="Circle steps with line" %}

{% endtab %} {% tab title="Circle Tabs" %}

{% endtab %} {% tab title="Rectangle steps with line" %}

{% endtab %} {% tab title="Rectangle tabs" %}

{% endtab %} {% tab title="Progress with circle" %}

{% endtab %} {% tab title="Progress with bar" %}

{% endtab %} {% tab title="Hidden" %} {% hint style="info" %} Page navigation will **be entirely hidden.** {% endhint %} {% endtab %} {% endtabs %} ### 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** {% tabs %} {% tab title="Total Summary separated" %} **Show summary block on the last page of the multi-step calculator** is **OFF**

{% endtab %} {% tab title="Total Summary on last page" %} **Show summary block on the last page of the multi-step calculator** is **ON**

{% endtab %} {% tab title="Total Summary on every page" %} **Show summary block on the last page of the multi-step calculator** and **Show total summary** settings are **ON**

{% hint style="info" %} Ensure you have chosen totals to display on the Total Field Element setting. {% endhint %} If you click on the **Show Summary,** the Total Summary of your order will be opened in a pop-up:

{% endtab %} {% endtabs %} ## 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 {% tabs %} {% tab title="Full Width" %}

{% endtab %} {% tab title="2 Columns" %}

{% endtab %} {% endtabs %} ### 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](https://docs.stylemixthemes.com/cost-calculator-builder/conditional-system/condition-options) 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

{% hint style="success" %} After configuring the settings, do not forget to click the **Save** button to apply the changes. {% endhint %} {% hint style="danger" %} **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. {% endhint %}

## 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 t**he 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**

{% hint style="success" %} You can also modify the **Back and Next** button labels and **Page Box Style** according to your needs. {% endhint %} 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'

{% hint style="info" %} 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). {% endhint %} Here is the result:

{% hint style="success" %} Later you can upgrade this calculator using the[ **Repeater field**](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/repeater-pro-feature) according to your needs. {% endhint %} Good job, you have done it successfully!