# Order Form

## What is an Order Form?

An **Order Form** in the **Cost Calculator Builder** is a feature that allows users to create a form integrated with the calculator for collecting detailed customer information and streamlining the order process. It typically works as part of a cost estimation workflow, where potential customers calculate the cost of a service or product and then proceed to place an order directly through the form.

> In short "Order form is a section in the callculator where the client info (name, email, phone etc) will be taken".

{% tabs %}
{% tab title="Order Form ENABLED" %}

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

{% tab title="Order Form DISABLED" %}
**Order Form** and [**Payments**](/cost-calculator-builder/cost-calculator-settings/calculator-settings/payments.md) are <mark style="color:red;">**disabled**</mark>

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

{% hint style="info" %}
In this case, a calculator will be used just to show the final result or relevant calculations in the **Summary Block**. It will not accept payments and orders.
{% endhint %}
{% endtab %}

{% tab title="Order Form DISABLED\*" %}
**Order Form** is <mark style="color:red;">**disabled**</mark>, but [payments](/cost-calculator-builder/cost-calculator-settings/calculator-settings/payments.md) are <mark style="color:green;">**enabled**</mark>.

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

{% hint style="info" %}
In this case calculator accepts orders and payments. However, you have to choose [**the form for payments**](/cost-calculator-builder/payments/settings.md#form-for-payments) in the payments tab to accept payments.&#x20;
{% endhint %}
{% endtab %}
{% endtabs %}

{% hint style="success" %}
All actions related to the order creation process (such as sending emails, reCAPTCHA, and more) are configured in the **Order Form** tab.
{% endhint %}

## Overview of the tab

Here is the overview of the enabled Order Form tab:

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

### Form Provider and Button texts

<figure><img src="/files/e2Ozj2rwrDsalGaw6pkO" alt=""><figcaption><p>Form Provider section with Cost Calculator <a href="/pages/rYgCuwqfOvoKzznlpqto">Form Manager</a> as a form provider</p></figcaption></figure>

* **Form Provider** - choose the Order Form provider:
  * **Cost Calculator** - you can use the powerful [**native form builder**](/cost-calculator-builder/cost-calculator-settings/calculator-settings/form-manager.md) of Cost Calculator
  * **Contact Form** - by integrating with the[ **Contact Form 7**](/cost-calculator-builder/pro-plugin-features/contact-form-7-plugin.md) plugin, you can use CF7 forms as an order form. However, please note that in this case, the **button texts** will be **managed by CF7,** and the **corresponding settings** for button texts on this page **will disappear.**
* **Forms** - choose one of the forms in the form provider
* **Open Form Button Text** - write down the text that opens the order form
* **Submit Button Text** - write down the text that submits the order. It will be done after filling out the order form by the user.&#x20;

{% tabs %}
{% tab title="Open Form Button Text" %}

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

{% tab title="Submit Button Text" %}

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

Refer to this manual to get more info about Form Manager:

{% content-ref url="/pages/rYgCuwqfOvoKzznlpqto" %}
[Form Manager](/cost-calculator-builder/cost-calculator-settings/calculator-settings/form-manager.md)
{% endcontent-ref %}

### Order Notification Email&#x20;

In this section, you can manage the email settings that will be sent once the order is created.&#x20;

{% hint style="warning" %}
To make the **email-sending feature** work, ensure you have set up [SMTP settings](https://www.wpbeginner.com/plugins/how-to-set-up-wp-mail-smtp-with-any-host-ultimate-guide/) on your website.
{% endhint %}

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

* **Subject** - enter the subject of the email
* **Add an Order ID to the subject line** - add the unique Order ID to the email subject
* **Send Email to Address** - indicate the email address that will receive the email once the new order is created. The content of the email will be the same for all recipients. Use the :heavy\_multiplication\_x: button to remove the email address from the list.
  * **Enter your email** - provide the email address
  * **Description** - This field is just for you, it will not be included in the email message. It helps to mark who owns the email address.
  * **Add New Adress** - use the button to add a new email address

<figure><img src="/files/jBWUs0gFTyACrBV5AcKk" alt=""><figcaption><p>Sample Email Message in Gmail</p></figcaption></figure>

### **Show Summary with calculations after adding contact info**

{% embed url="<https://youtu.be/MUnr5ulKKEs>" %}

This feature lets you collect customers' contact details before showing them the price summary. When enabled, an order is created after the customer fills out the contact form, allowing you to get their info even if they don't make a payment. This way, if a customer isn't satisfied with the price, you can reach out to negotiate and encourage them to use your service. It helps you gather leads and turn them into clients.

<figure><img src="/files/7PByjgXoGh8wEMy1zFXF" alt=""><figcaption><p>'<strong>Show Summary with calculations after adding contact info' setting on the Order Form page</strong></p></figcaption></figure>

* **Contact info form title** - put a title to the contact form
* **Submit button text** - put a text to the submit button
* **Action options after submitting the form** - indicate the action that needs to be performed after submitting the contact form
  * **Send a quote and invoice to the customer's email** - with this option, order details and the invoice are sent to the customer's email. If payment methods are enabled, the customer will need to check their email for the payment amount, as these details won't be visible in the calculator.
  * **Show calculations on Summary block** - with this option, customers can see the calculations and order details on the same page immediately after filling in their contact info

{% tabs %}
{% tab title="Send a quote and invoice to the customer's email" %}

<figure><img src="/files/FJk3WIz8wA2U8ji034tC" alt=""><figcaption><p>The process of ordering when 'Send a quote and invoice to the customer's email' is enabled</p></figcaption></figure>
{% endtab %}

{% tab title="Show calculations on Summary block" %}

<figure><img src="/files/I3HKw56MAOCQMFrCoXfj" alt=""><figcaption><p>The process of ordering when 'Show calculations on Summary block' is enabled</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
To make the **"Send a Quote and Invoice to the Customer's Email"** setting work, ensure you have set up [SMTP settings](https://docs.stylemixthemes.com/f-a-q/smtp-settings) on your website.
{% endhint %}

### Terms and Conditions Agreement

You can add the Terms and Conditions agreement checkbox within your calculator. To do that, enable the Terms and Conditions agreement.

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

* **Checkbox Label -** enter text that will notify the user about reviewing Terms & Conditions next to the checkbox. Limit: **40** symbol&#x73;**.** For exampl&#x65;**: "***By clicking this box, I agree to your*". At the end of this text, the **Linked Page Title** will be inserted.
* **Choose Page to Link -** select the terms page from the dropdown.
* **Linked Page Title -** enter text for the terms link. Limit: 20 symbol&#x73;**.** This title will be inserted at the end of the **Checkbox Label**.

This is how it will look for your users

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

### Captcha by Google to Prevent Bots

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

You can enable **reCAPTCHA** by Google to prevent bots. Just enable the toggle to apply reCAPTCHA to this calculator.

{% hint style="info" %}
Google reCAPTCHA credentials should be provided in the [**Global Settings**](/cost-calculator-builder/cost-calculator-settings/global-settings/recaptcha.md) of the plugin.
{% endhint %}

<figure><img src="/files/OwOuVwTXlrDIZmHbVkSE" alt=""><figcaption><p>The Result of the reCAPTCHA</p></figcaption></figure>

### Total Field Element

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

In this section, you can choose which[ **formula**](/cost-calculator-builder/calculator-elements/total.md) elements will be shown in [**Orders**](/cost-calculator-builder/pro-plugin-features/orders.md) and [Email](/cost-calculator-builder/develeopers-guide/cost-calculator-hooks/email.md) as total formulas. You can select one or more formula fields. Unselected formula fields will be shown as ordinary calculator elements.

> We have selected **Total Description** and **Formula 2** in our setting. That's why they have been displayed differently than other calculator elements. We have **not selected Formula 1**, in the picture you can see it is among other calculator elements.
>
> Note that, the last **Total** (which is $537.50), is the total cost of our order, the amount that has been charged. It will be set in the [**Payments**](/cost-calculator-builder/cost-calculator-settings/calculator-settings/payments.md) tab, that is why it **does not belong** to our setting.

<figure><img src="/files/a9xPgfVRcBiwn8Apc5mJ" alt=""><figcaption><p>Screenshot from <a href="/pages/x1lcWIrMajxDf9UF9PRB"><strong>Orders Tab</strong></a></p></figcaption></figure>

### Payment Gateways

You can enable Payment Gateways for the order form in this section. The payment gateway's credentials should be configured beforehand in the [**Payments**](/cost-calculator-builder/cost-calculator-settings/calculator-settings/payments.md) tab.

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

Here is how payment gateways look on the calculator:

<figure><img src="/files/5yskfOAM8502UGznrksv" alt=""><figcaption></figcaption></figure>

Refer to this article to get more information about payments:

{% content-ref url="/pages/wBnGbh0NGGquOYV2tWiz" %}
[Payments](/cost-calculator-builder/payments/settings.md)
{% endcontent-ref %}

## Example for the Order Form

Let's see the example below with the explanation. **Order Form** and [**Payment Gateways**](/cost-calculator-builder/cost-calculator-settings/calculator-settings/payments.md) are <mark style="color:green;">enabled</mark>.

{% stepper %}
{% step %}
After entering the required info into the form, users will click the **Make Order** button:

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

{% step %}
In this step, the user will fill out the opened **Order Form** and proceed by clicking the **Submit** button

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

{% step %}
Choose the convenient payment method and continue by clicking the **Make Payment** button:

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

{% hint style="info" %}
Some payment methods may open a new tab to do the checkout, like [**PayPal**](/cost-calculator-builder/payments/paypal.md) or [**WooCommerce**](/cost-calculator-builder/cost-calculator-settings/calculator-settings/woo-checkout.md).
{% endhint %}
{% endstep %}

{% step %}
If you enabled the [**Confirmation Page**](/cost-calculator-builder/cost-calculator-settings/calculator-settings/confirmation-page.md), this message confirms the successful order:

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

{% step %}
Admin of the website will see the order in the [**Orders Page**](/cost-calculator-builder/pro-plugin-features/orders.md) of the plugin, and be notified via email:

{% tabs %}
{% tab title="Orders Page" %}

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

{% tab title="Email" %}

<figure><img src="/files/0v5fZBhtEIhJeGNeELX1" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}
{% endstep %}
{% endstepper %}

## Troubleshooting Email Send & Receive Issues

Sometimes, there will be an issue in sending an email process which we will discuss below:

1. &#x20;If your customer fills all the form fields correctly after clicking the submit button and you set up Send Form Settings properly, they do not get the Confirmation page about sending data. In this situation, you should address your hosting since wp\_mail() was not working on the server.
2. &#x20;In the next probable situation, your customer gets the confirmed success message about sending data but they will not see that email in their mailbox. This means that your plugin sending option is working correctly. However, it is because your email is sent to the spam messages block. To resolve this issue, please address your personal email service (Gmail, Windows Outlook and etc.) spam folders. If you cannot find that message in your spam folder, please check the spam settings of your Email Server. If it does not help too, you can refer to the Support Team of your Web Hosting.

{% hint style="info" %}
Anyway, **double check** your email-sending feature is working and  [SMTP settings](https://docs.stylemixthemes.com/f-a-q/smtp-settings) are configured on your website accordingly.
{% endhint %}


---

# Agent Instructions: 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/cost-calculator-settings/calculator-settings/order-form.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.