# Confirmation Page

A **Confirmation page** is a page users will see after they make an order in the calculator. You can customize and show the Confirmation page only if you enable the [**Order Form**](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings/order-form) or any [**Payment method**](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings/payments)**.**

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FbkCrkVEiVZTfI6tD8KXg%2Fimage.png?alt=media&#x26;token=7355390d-4bdc-472f-97d5-76d725db1f95" alt=""><figcaption><p>Sample Confrmation Page</p></figcaption></figure>

{% hint style="warning" %}
The Confirmation page will be shown only if you enable the [**Order Form**](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings/order-form) or  [**Payment method**](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/global-settings/payments-global).&#x20;
{% endhint %}

## Overview of the tab

We can divide the Confirmation Page tab into two parts: **Settings** and **Real-Time Preview**

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FHmHeIYLLJxHVyEKsLJ8s%2Fimage.png?alt=media&#x26;token=9259327d-1e7e-451d-ad58-a33c351b81b3" alt=""><figcaption><p><a href="">Calculator Settings</a> > Currency</p></figcaption></figure>

{% hint style="info" %}
The look of the **Confirmation page** comes from the **appearance** of the calculator. You can customize how the calculator and **Confirmation page** look by going to the [**Appearance tab**](https://docs.stylemixthemes.com/cost-calculator-builder/plugin-features/calculator-customization) on your calculator.
{% endhint %}

## Confirmation Page Settings

These are the available settings on the **Confirmation page**:

<div><figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FkaFRQfHWNq9VHqs1WZHv%2Fimage.png?alt=media&#x26;token=3bc62666-df87-4b71-88e3-ca57a9753079" alt=""><figcaption><p>Confirmation Page is <mark style="color:green;"><strong>Enabled</strong></mark></p></figcaption></figure> <figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FUogMIx7GITAyvI11GtJ5%2Fimage.png?alt=media&#x26;token=3b6e4036-2275-4c91-b6d7-0e600a9cb45e" alt=""><figcaption><p>Confirmation Page is <mark style="color:red;"><strong>Disabled</strong></mark></p></figcaption></figure></div>

* **Enable confirmation page - a**ctivate this toggle to display a confirmation page after order submission.
  * [**Show this page on** ](#options-to-show-the-confirmation-page)**-** Select where the confirmation page appears. Options include:
    * [**Same Page as the Calculator**](#same-page-as-calculator)
    * [**Top of a Calculator as a Pop-up** ](#top-of-calculator-as-popup)
    * [**Separate Page**](#separate-page)
    * [**Custom Page**](#custom-page)
  * **Texts**
    * **Order Confirmation Message Title -** customize the main text to thank the user for their order, e.g., "*Thank you for your order!*"
    * **Order Details Message (body) -** add a message notifying users that order details have been sent to their email, e.g., "*We have sent order details to your email.*"
    * **Order ID -** enter the label displayed before the **Order ID** on the page
  * **Back Button Text - c**ustomize the text for the button that redirects the user back to the calculator, e.g., "*Back to calculator*."
  * **Button to Download Receipt**<mark style="color:red;">**\***</mark>**&#x20;-** enable this toggle to allow users to download a [**PDF Receipt**](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/global-settings/pdf-entries) of their order.
  * **Button to Share Receipt**<mark style="color:red;">**\***</mark>**&#x20;-** enable this toggle to provide users an option to share their receipts. Once users click on the button, a pop-up modal opens and the receiver information should be provided.
  * **Add Custom Button -** add a custom button for additional user actions, such as navigating to another page or feature by following the link you provided.
* **Order completion message -** if the **Confirmation page** is disabled, you can provide just one text that will be displayed as a confirmation message next to the Order Form.

{% hint style="warning" %} <mark style="color:red;">**\***</mark>Settings will work only if [**PDF Entries**](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/global-settings/pdf-entries) and [**Share Quote Form**](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/global-settings/share-quote-form) are enabled.
{% endhint %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F15CNHeMiBXkZOIKxFSxu%2Fimage.png?alt=media&#x26;token=9b1365d7-ac88-4d66-931d-490bb422d2a5" alt=""><figcaption><p>Sample Settings</p></figcaption></figure>

## Options to show the Confirmation page

### **Same Page as Calculator**

This option will show the Confirmation page on the same page as your calculator.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fktk1OTSg9ItxN9sbsyeK%2Fconfirmation%20page2.gif?alt=media&#x26;token=04ce4b16-d17b-4548-8572-b9f86ca32109" alt=""><figcaption></figcaption></figure>

### **Top of Calculator as Popup**

This option will show the Confirmation page on top of a calculator page as a popup.&#x20;

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FjyNn6PnaB3zLmnuQ4hxJ%2Fconfirmation%20page3.gif?alt=media&#x26;token=94927a27-f36e-4992-a1ef-f41c80480404" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When using [**PayPal**](https://docs.stylemixthemes.com/cost-calculator-builder/payments/paypal) as a [payment method](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings/payments), the **Confirmation page** can not be shown as a [**popup** ](#top-of-calculator-as-popup)or [**on the same page**](#same-page-as-calculator) as the Calculator. The Confirmation page will be shown on a [**separate**](#separate-page) or [**custom page.**](#custom-page)
{% endhint %}

### **Separate Page**

This option allows you to choose the page on your website where the Confirmation page will be shown.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FPMGhEpAZafHHmynYD6LL%2Fconfirmation%20page.gif?alt=media&#x26;token=1a8e9c03-4b69-460b-8a82-644aaded0050" alt=""><figcaption></figcaption></figure>

### **Custom page**

This setting allows you to redirect your user to the page outside of your website domain after making the order. For example, when you have a different page for the thank you page. This way the setting of the **Confirmation Page** won’t apply to the page outside of your website.&#x20;

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FLCoX3acXB805tXEwIkH5%2Fimage.png?alt=media&#x26;token=e37d0c06-4c2a-4a42-9397-30ae6a05690b" alt=""><figcaption></figcaption></figure>

* Custom page Link - enter the **URL link** of the page you want to show as **Confirmation Page**