# Validated form

Accurate user input is crucial for reliable cost estimates. The Cost Calculator Builder's form validation ensures data is entered correctly by setting guidelines for fields like name, email, website URL, and phone number. This reduces errors and enhances user experience, resulting in more dependable calculations.

To integrate the validated form into your webpage, simply use the drag-and-drop feature to move the form element to the desired location.

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

## Element Tab

Under this tab, you can choose the type of the validated form and other related preferences:

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

* **Element Name** - title of the field.
* **Element Placeholder** - you can either fill the placeholder or not (It is not required).
* **Description** - optional brief description of the field.
* **Element width -** set the width of the field relative to the width of the calculator in 100% scale. You will see the changes in real time.
* **Validation Settings** - this is the most important part of the settings for the validated form element that identifies the type of validation. Users will get a warning message and can not submit the form without following these strict rules of the validated form field:
  * **Name** - users are supposed to consider using a **text input** with validation.
  * **Email** -  requires the presence of a `@` symbol and a domain, following standard email format rules.
  * **Phone** - field accepts only numbers and has a special dropdown with worldwide/international country phone number codes.
  * **Link** - field accepts only correct URL Links as input.
* **Default Value** - the default value will be shown to the users when they open the page with this calculator.

{% tabs %}
{% tab title="Name" %}

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

{% tab title="Email" %}

<figure><img src="/files/8OaeCcoSwHt1r46aWiMt" alt=""><figcaption></figcaption></figure>

Sample Warning Message:

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

{% tab title="Phone" %}

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

{% tab title="Link" %}

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

Sample Warning Message:

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

## Settings Tab

The Validated Form element has the following fields in the **Settings** Tab:

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

* **Required** - Defines whether the element will be required to be filled or not.
* **Hidden by Default** - The element will be hidden by default. You can make it visible using [**conditional system**](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/pages/OneKKwO4j2k65VfBcrvD#id-1.-hidden-by-default).
* **Show in Grand Total** - Disable if you want to hide the element in Grand Total.
* **Additional Classes** - Add[ extra classes](/cost-calculator-builder/plugin-features/additional-classes.md) to the HTML elements to further style changes.

Here is the sample usage of the validated form in action:

<figure><img src="/files/A8PdP2EScZy1p0Mm3Q1s" alt=""><figcaption><p>Validation Element in Action</p></figcaption></figure>


---

# 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/calculator-elements/validated-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.