Quantity
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
Last updated