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.

Element Tab

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

• 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.

Name

Email

Phone

Link

Settings Tab

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

• 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.

• Show in Grand Total - Disable if you want to hide the element in Grand Total.

• Additional Classes - Add extra classes to the HTML elements to further style changes.

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

Validation Element in Action