Using the Quantity element allows you to create any type of numbers as input.
Element Tab
The Quantity element has the following fields in the Element Tab:
  • Name - Title of the field.
  • Placeholder - You can either fill the placeholder or not (It is not required).
  • Description - Description of the field.
  • Step - Defines up and down buttons step value.
  • Default Value - The default value will be shown to the user when he opens a cost calculator.
  • Name of Value - You can put unit measures, such as kg(kilograms), gr(grams), m (meters), etc. You can also decide whether you want unit measures, for example, kg, to show on the right or left.
  • Multiply (cost per value) - Enable it if you want to multiply the value by a certain number.

Settings Tab

The Quantity element has the following fields in the Settings Tab:
  • Currency Sign - Enable if you want to show the currency sign in the total summary.
  • Currency Settings - Applies global currency settings such as thousand and decimal. separators, the number of decimals to the entered value.
  • Round Value - Enable if you want to round the value to the whole number in the total summary.
  • Required - Defines whether the element will be required to fill or not.
  • Hidden by Default - The element will be hidden by default.
  • 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

Example of Using Quantity Element

Let’s create a BMI Calculator with a quantity element.
The default height value will be 170 with a unit value in cm. The default weight value will be 60 with a unit value in kg. There will be a formula element to calculate the BMI.
That’s how it will look on the user’s page:
You can set up Multiply (cost per value) when you want the value a user inputs to multiply for the cost. For example, if the cargo service delivers packages from the USA to Europe at 25 USD/ kg. The values will multiply by 25 to calculate the fees for the delivery.
That's how it will look on the user's page