# Form Manager {% embed url="" %} The **Form Manager** is an advanced feature with an amazing form builder within the Cost Calculator Builder plugin. It allows you to create custom forms users must fill out when placing an order (if the [**Order Form**](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings/order-form) is **enabled**). This feature helps gather necessary information through various input fields that can be customized and displayed dynamically.

## Overview of the Form Manager To access the Form Manager inside of any calculator follow Individual **Settings > Basic > Form Manager:**

On the opened tab, there is **Order Form Builder** and on the right sidebar, there is the list of available forms to choose from for the current calculator. Select the form and just click on the **Apply** button to use this form as an order form for the current calculator:

To create a new order form, click on the '**+**' button:

## Order Form Builder Using the Order Form Builder, you can [**update**](#update-duplicate-delete-the-form)**,** [**duplicate**](#update-duplicate-delete-the-form)**,** [**rename**](#rename-the-form)**,** or [**delete** ](#update-duplicate-delete-the-form)the forms; [**add**](#order-form-fields)**,** [**duplicate**](#reorder-delete-duplicate-fields)**,** [**remove**](#reorder-delete-duplicate-fields)**,** or [**modify** ](#width-of-the-fields)the fields inside of the form. ### Update/Duplicate/Delete the Form If you make any changes to the existing form you have to update it by clicking the **Update b**utton:

{% hint style="warning" %} Be sure to **update the form** and **save the calculator** after making changes! If you don’t, your changes **will not** be saved. {% endhint %} Use the **vertical three dots '****⋮****'** to get the options to **Delete** and **Duplicate** the form:

### Rename the Form Use the pencil icon next to the **Form Title** to **rename** it:

## Order Form Fields There are **13 available fields** to build the Order Forms. Click on the **Add Field** button to add one of them to the form:

On the right sidebar, you get the settings for the fields, which differ by field:

#### Reorder/Delete/Duplicate Fields Use the **drag-and-drop** functionality to **change the order** of fields. Once you hover over the fields, you can see the special buttons to **Delete** and **Duplicate** the field, as well as the **indicator of the** [**width**](#width-of-the-fields) of the field:

#### Width of the Fields **The Cost Calculator Order Form Builder** allows you to adjust the width of form fields. The form's total width is divided into **12 equal parts**, and you can select the field width relative to these divisions. The available options are **col-4, col-6, col-8, col-10, and col-12**. For instance, **col-12** represents the **full width,** while **col-6** represents **half the width**, and so on.

1. The easiest way to change the width of the form fields is by dragging the right border of the field with the cursor in the Form Builder:

2. The second way of doing it is by the settings of the field:

{% hint style="info" %} [**Email** ](#email)fields can not have a width less than **col-6.** {% endhint %} #### Required Fields In the settings for any field, you'll find a **toggle labeled "Make Field Required"**. This setting allows you to fill out the required field, ensuring that users cannot submit the form without completing it.

{% hint style="info" %} One email field in the form must be the **primary mean of communication** as it is necessary to process the payment. You can not delete this email field from the forms unless you add another email field. {% endhint %} On the front end, a red asterisk **'****\*****'** will appear next to the field label, and users will receive an error message if they leave the required fields empty:

> *Let's see each of the fields one by one.* ### **Name**

The **Name** field is designed to collect the user's full or first name. This field is essential for identifying customers, personalizing communications, or addressing specific individuals within a form.

The **Email** field captures the user's email address, which is crucial for ongoing communication, such as sending confirmation messages, follow-ups, or promotional offers. Ensuring a valid email is collected helps maintain effective contact with users.

* **Make Field Required** - enable the toggle to make the field [**required**](#making-the-fields-required) * **Field Label** - write the label for the field * **Field Placeholder** - provide the placeholder for the field. * **Confirmation Email** – adds an additional email field to ensure that both email entries match. * **Width** - indicate [**the width**](#width-of-the-fields) of the field * **Position** – if the **Confirmation Emai**l option is enabled, this setting allows you to adjust the placement of the two email fields *(Right or Bottom)* {% tabs %} {% tab title="Position: Right" %}

{% endtab %} {% tab title="Position: Bottom" %}

{% endtab %} {% endtabs %} ### **Phone**

The **Phone** field allows users to input their contact numbers. It is useful for businesses or services that need to reach customers quickly, such as for appointments, follow-ups, or providing support via phone.

* **Make Field Required** - enable the toggle to make the field [**required**](#making-the-fields-required) * **Field Label** - write the label for the field * **Field Placeholder** - provide the placeholder for the field. * **Width** - indicate [**the width**](#width-of-the-fields) of the field ### Input Textbox

The **Input Textbox** field is a versatile input for collecting brief pieces of information, such as a first name, city, or title. It is helpful when only a small amount of data is needed in response to a specific question.

The **Text Area** provides a larger, multi-line input space for users to provide more detailed information, such as feedback, comments, or descriptions. It is useful for collecting longer responses that go beyond the limitations of a single-line text field.

The **Number** field is specifically designed for entering numeric values. It is useful when collecting data like quantities, pricing, or any other numeric information that is relevant to the form’s purpose.

The **Dropdown** field presents users with a list of options to choose from, making it perfect for selecting a specific category, product, or service. It simplifies data entry by limiting the user to predefined choices.

* **Make Field Required** - enable the toggle to make the field [**required**](#making-the-fields-required) * **Title of Dropdown Group** - write the title for the dropdown * **Multiselect** - enables to selection of multiple options from the dropdown * **Default Value** - choose the option(s) that will be displayed as selected by default. Users can re-select the option(s) in the form * **Add new** - use the button to add new options * **Width** - indicate [**the width**](#width-of-the-fields) of the field {% hint style="success" %} Use the drag\&drop functionality to **reorder** the options and the **'****x****' button** at the end of the options to remove it. {% endhint %} ### Radio

The **Radio** field allows users to select one option from multiple choices, ensuring they can only choose a single, mutually exclusive answer. This field is ideal for binary choices or questions where only one response is needed, such as selecting a gender or yes/no questions.

* **Make Field Required** - enable the toggle to make the field [**required**](#making-the-fields-required) * **Title of Radio Group** - write the title for the radio * **Add new** - use the button to add a new option * **Horizontal/Vertical** – allows you to choose how options are displayed, either in a horizontal row or a vertical list. * **Width** - indicate [**the width**](#width-of-the-fields) of the field {% hint style="success" %} Use the drag\&drop functionality to **reorder** the options and the **'****x****' button** at the end of the options to remove it. {% endhint %} {% tabs %} {% tab title="Horizontal" %}

{% endtab %} {% tab title="Vertical" %}

{% endtab %} {% endtabs %} ### Checkbox

The **Checkbox** field enables users to select multiple options from a list, offering flexibility when more than one choice can apply, such as selecting interests, features, or preferences.

* **Make Field Required** - enable the toggle to make the field [**required**](#making-the-fields-required) * **Title of Checkbox Group** - write the title for the checkbox * **Add new** - use the button to add a new option * **Default Value** - choose the options that will be displayed as checked by default. Users can uncheck them in the form. * **Horizontal/Vertical** – allows you to choose how options are displayed, either in a horizontal row or a vertical list. * **Width** - indicate [**the width**](#width-of-the-fields) of the field {% tabs %} {% tab title="Vertical Checkbox" %}

{% endtab %} {% tab title="Horizontal Checkbox" %}

{% endtab %} {% endtabs %} ### Time Picker

**The time picke**r element allows you to get the specific time or time range in different formats.

* **Make Field Required** - enable the toggle to make the field [**required**](#making-the-fields-required) * **Label** - provide the label for the field * **24-hour format** - enable the toggle to use the 24-hour time formatting (20:00 instead of 8:00 pm) * **Range Time** – enables the selection of the start and end time in the field * **Width** - indicate [**the width**](#width-of-the-fields) of the field {% tabs %} {% tab title="12-hour Format" %}

{% endtab %} {% tab title="24-hour-Format" %}

{% endtab %} {% tab title="Range Time Picker" %}

{% endtab %} {% tab title="Regular Time Picker" %}

{% endtab %} {% endtabs %} ### Date Picker

**The date picke**r element allows you to get the specific date or date range in different formats.

* **Make Field Required** - enable the toggle to make the field [**required**](#making-the-fields-required) * **Label** - provide the label for the field * **Field Placeholder** - provide the placeholder for the field * **Range Date**– enables the selection of the start and end date in the field * **Width** - indicate [**the width**](#width-of-the-fields) of the field {% tabs %} {% tab title="Regular Date Picker" %}

{% endtab %} {% tab title="Range Date Picker" %}

{% endtab %} {% endtabs %} ### Formatted Text

The **Formatted Text** field provides a static text block for including instructions or additional information on the form. It is helpful for guiding users or clarifying the purpose of certain fields without requiring them to input data.

* **Title** - enter the title for the field * **Tex**t - provide your text using **WYSIWYG** *(What You See Is What You Get)* **editor** * **Width** - indicate [**the width**](#width-of-the-fields) of the field

{% hint style="info" %} The **font style** may appear different on the front end compared to the backend preview, as it depends on the theme of your website. {% endhint %} ### Space

The **Space** field adds visual spacing between form elements. This helps improve the layout and readability of the form, ensuring that fields are neatly organized and easy to navigate.

**Width** - indicate [**the width**](#width-of-the-fields) of the field {% tabs %} {% tab title="Backend: Space in Form Builder" %}

{% endtab %} {% tab title="Frontend: Space in Order Form" %}

{% endtab %} {% tab title="Frontend (without highlights)" %}

{% endtab %} {% endtabs %} *** {% hint style="success" %} These fields together provide a comprehensive toolkit for building forms that collect a wide range of information from users in an intuitive and user-friendly way. {% endhint %}