Form Manager
Last updated
Was this helpful?
Last updated
Was this helpful?
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 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:
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-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:
Email fields can not have a width less than col-6.
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.
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.
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.
Make Field Required - 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.
Make Field Required - 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.
Make Field Required - 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.
Make Field Required - 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.
Make Field Required - 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.
Make Field Required - 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.
Make Field Required - enable the toggle to make the field 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 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.
Make Field Required - 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.
Make Field Required - 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
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 of the field
The time picker 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
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 of the field
The date picker 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
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 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.
