> For the complete documentation index, see [llms.txt](https://docs.stylemixthemes.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.stylemixthemes.com/cost-calculator-builder/pro-plugin-features/multistep-calculator.md).

# Multistep Calculator

The Cost Calculator Builder plugin allows you to create step-by-step (multistep) calculators easily right on the calculator builder. Instead of showing everything at once, this feature helps break down the calculator into multiple pages, making it easier for users to navigate the steps. 

<figure><img src="/files/ghCEVIfXIoCfoMXEgQSF" alt=""><figcaption><p>The look of the multistep calculator</p></figcaption></figure>

## How to Create a New Page?

Creating a multistep form/calculator is a one-click job. You can turn any existing calculator into a multistep calculator by adding a second (third, fourth, etc.) page to it. Just click on the <kbd>+ Add Page</kbd> button:

<figure><img src="/files/P6wnYvjiOd74aRy1EVH3" alt=""><figcaption></figcaption></figure>

A new page will be added immediately, then you can customize it according to your needs:

<figure><img src="/files/TT3Q8bFQw6MutRdy5sMF" alt=""><figcaption></figcaption></figure>

## Page Navigation Settings

To reach the page navigation settings can be edited by clicking the <i class="fa-pen-to-square">:pen-to-square:</i> **Edit** icon on the top right corner of the navigation bar:

<figure><img src="/files/R5wJircXkBsSulMEfyoE" alt=""><figcaption></figcaption></figure>

It has two tabs, **Variants** and **Settings**.

### Variants tab

Under the Variants tab, you can choose one of the premade navigation bar styles (variants):

<figure><img src="/files/fGtnVKShzLu2p86uueef" alt=""><figcaption></figcaption></figure>

Here is a preview of the available variants:&#x20;

{% tabs %}
{% tab title="Circle with line" %}

<figure><img src="/files/HIhvctsAowomf2KvdHzI" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Circle Tabs" %}

<figure><img src="/files/qCYQXGzfDeHtwjo1dyus" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="/files/TMU5uMpSMyAIhGQrkYoM" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Rectangle tabs" %}

<figure><img src="/files/aWiBFUC4MIN85ROSTkGr" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="/files/BxAb2y0kqM1HKQEEJTJu" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="/files/j8sTPZ4Kzf7p14StZbYb" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Hidden" %}
{% hint style="info" %}
Page navigation will **be entirely hidden.**
{% endhint %}
{% endtab %}
{% endtabs %}

### Settings tab

<figure><img src="/files/ZBnZckmkmE7VuSyfvqv8" alt=""><figcaption></figcaption></figure>

* **Hide Pagination Title -** enable the setting to hide the title of the pages in your step-by-step calculator
* **Summary after last page** - The setting will be applied only when a calculator is built with a Page breaker
* **Total in page -** There will be a button at the bottom of each step for users to click and open a pop-up with a summary
* **Page Break Formulas** - choose the total field formula(s) to be displayed at the bottom of every page when the **Show Total Summary** option is <mark style="color:green;">**on**</mark>

{% tabs %}
{% tab title="Total Summary separated" %}
**Summary after last page** is <mark style="color:red;">**OFF**</mark>

<figure><img src="/files/fkMjJBpoHnb7MwqMCoUd" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Total Summary on last page" %}
**Summary after last page** is <mark style="color:green;">**ON**</mark>

<figure><img src="/files/IuVzENMZADqtKlJLXRmA" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ruwE04p4VTRJ30cmQMhM" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Total Summary on every page" %}
**Summary after last page,** and **Total in page** settings are <mark style="color:green;">**ON**</mark>

<figure><img src="/files/RjarkGK7bCimzrPFBbxd" alt=""><figcaption></figcaption></figure>

{% 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:

<figure><img src="/files/Lm22bqcNvctNXmrsNfck" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/yXNCBirATzSvMpFKZ87P" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Page Settings

To reach the Page settings, click on the <i class="fa-pen-to-square">:pen-to-square:</i> button on the top right corner of the page itself (not the navigation bar):

<figure><img src="/files/lfWpGFUdEDU9ALUogcbs" alt=""><figcaption></figcaption></figure>

***

Here are the available settings:

<figure><img src="/files/SuOQQbLJ47gpZbSjzSyL" alt=""><figcaption></figcaption></figure>

* **Page Title -** enter a title for the page for easy identification
* **Description** - enter a text that will be displayed with the page title to give more info about the page.&#x20;
* **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").

### 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.

<figure><img src="/files/41u2mGQVyk1xuls4gg41" alt=""><figcaption></figcaption></figure>

* Choose one of the **All** or **Any** options first.&#x20;
  * **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](/cost-calculator-builder/conditional-system/condition-options.md) by element)&#x20;
* **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

<figure><img src="/files/Wcry0denVc7rARCrjSAP" alt=""><figcaption><p>Example usage of Condition</p></figcaption></figure>

## Example Usage

This feature 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.

{% stepper %}
{% step %}
In the existing calculator, create 2 new pages by clicking the <kbd>+ Add Page</kbd> button:

<figure><img src="/files/EaeQ9YgADu5q7Oon2XzP" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
We will divide this calculator into three pages: **Pizzas, Drinks**, and **Delivery**. Our newly created two pages are empty right now. All elements are on our first page. Move the fields to the second and third pages using drag\&drop accordingly (*e.g, we move the  **Delivery Location**, **Select the Branch Geolocation** fields to the **Delivery** (third)* *page*):

<figure><img src="/files/gd5kol2LA8hhHjYC2aSQ" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
We will customize the Navigation bar. Open its settings:

<figure><img src="/files/SWJTuW0JAVC34D5asNQv" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Customize the navigation style according to your needs from the **Variants tab**, then move to the **Settings tab** and enable both settings *(so our total summary will be displayed at the end of the calculator as a separate page)*, and indicate the total formula to show:

<figure><img src="/files/44ca0yIcJXIO7IbdaMLj" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Change the page names accordingly, one by one:

* Page 1 -> **Pizzas**
* Page 2 -> **Drinks**
* Page 3 -> **Delivery**

<figure><img src="/files/ifrcO7CFpXTUxEV2yVm4" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
You can also modify the **Back and Next** button labels and **Page Box Style** according to your needs.
{% endhint %}
{% endstep %}

{% step %}
Let's add one checkbox field to the first - Pizza page, and add an option called 'I don't want drinks' with the option 'Skip Drinks':

<figure><img src="/files/a6LMD0y8u1Fi15SSKYu7" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
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'

<figure><img src="/files/41u2mGQVyk1xuls4gg41" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
With these settings, once the user **checks** the "Skip drinks" option, the calculator automatically moves to the delivery page (or skips the next - Drinks page).
{% endhint %}
{% endstep %}

{% step %}
Here is the result:

<figure><img src="/files/Z4arKSL4bsoOeov9IUcP" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

{% hint style="success" %}
Later you can upgrade this calculator using the[ **Repeater field**](/cost-calculator-builder/calculator-elements/repeater-pro-feature.md) according to your needs.&#x20;
{% endhint %}

Good job, you have done it successfully!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.stylemixthemes.com/cost-calculator-builder/pro-plugin-features/multistep-calculator.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.