Form Manager
Last updated
Last updated
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 is enabled). This feature helps gather necessary information through various input fields that can be customized and displayed dynamically.
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:
Using the Order Form Builder, you can update, duplicate, rename, or delete the forms; add, duplicate, remove, or modify the fields inside of the form.
If you make any changes to the existing form you have to update it by clicking the Update button:
Be sure to update the form and save the calculator after making changes! If you don’t, your changes will not be saved.
Use the vertical three dots '⋮' to get the options to Delete and Duplicate the form:
Use the pencil icon next to the Form Title to rename it:
There are 11 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:
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 of the field:
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-2, 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.
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:
The second way of doing it is by the settings of the field:
In the settings for any field, you'll find a small toggle button marked with an asterisk '*'. This button allows you to fill out the required field, ensuring that users cannot submit the form without completing it.
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.
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.
* - enable the toggle to make the field required
Field Label - write the label for the field
Field Placeholder - provide the placeholder for the field.
Width - indicate the width of the field
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.
* - enable the toggle to make the field 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 of the field
Position – if the Confirmation Email option is enabled, this setting allows you to adjust the placement of the two email fields (Right or Bottom)
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.
* - enable the toggle to make the field required
Field Label - write the label for the field
Field Placeholder - provide the placeholder for the field.
Width - indicate the width of the field
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.
* - enable the toggle to make the field required
Field Label - write the label for the field
Field Placeholder - provide the placeholder for the field.
Character Limit – specifies the maximum number of characters a user can enter in the field.
Width - indicate the width of the field
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.
* - enable the toggle to make the field required
Field Label - write the label for the field
Field Placeholder - provide the placeholder for the field
Character Limit – specifies the maximum number of characters a user can enter in the field
Width - indicate the width of the 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.
* - enable the toggle to make the field required
Field Label - write the label for the field
Field Placeholder - provide the placeholder for the field
Width - indicate the width of the field
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.
* - enable the toggle to make the field required
Title of Dropdown Group - write the title for the dropdown
Add new - use the button to add new options
Width - indicate the width of the field
Use the drag&drop functionality to reorder the options and the 'x' button at the end of the options to remove it.
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.
* - enable the toggle to make the field 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 of the field
Use the drag&drop functionality to reorder the options and the 'x' button at the end of the options to remove it.
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.
* - enable the toggle to make the field required
Title of Checkbox Group - write the title for the checkbox
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 of the field
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
Text - provide your text using WYSIWYG (What You See Is What You Get) editor
Width - indicate the width of the field
The font style may appear different on the front end compared to the backend preview, as it depends on the theme of your website.
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 of the field
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.
