# Contact Form 7 Plugin

The Cost Calculator plugin is integrated with the Contact 7 plugin, and it is possible to use the custom contact form instead of the default one.

{% hint style="warning" %}
The **Contact Form 7** plugin should be installed before enabling the Contact Form option in Send Form settings. To download the Contact Form 7 plugin go here: [Download Contact Form](https://wordpress.org/plugins/contact-form-7/)&#x20;
{% endhint %}

### Creating a custom Contact form

To create a form, open **Contact > Contact Forms** on your WordPress dashboard. You can manage multiple forms from this location.

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

A contact form is already available for immediate use. Right next to the name Contact form 1, you can see the shortcode **\[contact-form-7 id="16" title="Contact form 1"].** By editing the contact form you can customize the contact form field.

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

While editing the contact form, the tabs on top of the text area offer some useful tags for composing/customizing the email. The text area already has a basic collection of tags. However, you can insert any element by inserting the proper tag.

{% hint style="danger" %}
**Important!**

Please make sure that your form contains the **\[textarea]** field since the calculated data will be included in that field. The **\[textarea]** field is used to display the total summary generated by the Cost Calculator plugin. Without this field, the administrator and customers may receive empty emails.
{% endhint %}

After creating Contact form fields it is required to set up the Mail template. To do this switch to the Mial tab and fill out the fileds:

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

At this point, most of the customization for the form is complete. You can use this form in the Calculator settings.

{% hint style="success" %}
More details regarding contact form settings can be found in the [Contact 7 documentation](https://contactform7.com/docs/).
{% endhint %}

### Choosing the Contact 7 form in the Calculator settings

After enabling the integration of the Contact form 7 Plugin, the other options in this section will be different from your choice of form. The first option includes all your forms with the built-in Contact form 7 plugin with the Default form of the Cost Calculator plugin. You can use either the default form or your own Contact forms Contact Form 7 Plugin

![](/files/3GhrgT5wYUWP2mT7Yhto)

When you choose one of your Contact forms created in the Contact Form 7 plugin, you will see the generated text as ready email content. This text will be sent to the email that you set up in your chosen Contact Form 7 plugin.

### Contact Form Content

[Contact Form Content](#user-content-fn-1)[^1] displays the custom text and totals summary while submitting the form.

{% hint style="warning" %}
Contact Form Content will be displayed in the **\[textarea]** field, and if you have custom text in Contact Form 7, it will be overwritten.
{% endhint %}

<figure><img src="/files/pXZwXaGVcOFjs5kWjOtk" alt=""><figcaption><p>Individual Settings -> Order Form -> Contact Form Content</p></figcaption></figure>

Formula (Total) Fields and elements that have been used to build the calculator are displayed using the following shortcodes:

**\[ccb-subtotal]** - Displays the value of the fields that are used in the Cost calculator. Fields with a '0' value will not be added to the Contact Form.&#x20;

**\[ccb-total-0]** - Displays all formula fields with their value that have been selected in the **Total Field Element** setting in the **Order Form** section of the I**ndividual Settings** of the calculator.&#x20;

<figure><img src="/files/XbjxrLvYjWUCDIvBUgRp" alt=""><figcaption><p>Total Field Element settings in the Individual Calculator Settings</p></figcaption></figure>

{% hint style="success" %}
So, it's totally up to the **Total Field Element** setting which formula field(s) will be added to the Contact Form.
{% endhint %}

### Example

Here is the example of Contact Form 1 which is created in the Contact Form 7 plugin.

![](/files/Hwj6ARyu6kjx60hbJunR)

Now, let's see how it will appear in the calculator form after clicking the Submit button

![](/files/Z7ps2bdQIfOXGc9N8JCH)

The result of the message of the Contact Form 7 Plugin sent to the admin of the website:

![](/files/36FSiRRU0UalDASlQOR5)

[^1]: Individual Settings -> Order Form -> Contact Form Content


---

# 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/pro-plugin-features/contact-form-7-plugin.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.
