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 the up and down (increase/decrease) buttons' step value.
Default Value - The default value will be shown to the users when they open a cost calculator.
Min Value - minimum value that the quantity field can take
Max Value - maximum value that the quantity field can take
Unit Name - You can put unit measures, such as kg(kilograms), gr(grams), m (meters), etc, to this field. You can also decide whether you want unit measures, for example, kg, to show on the right or left.
Hide Min/Max Values - Enable to hide the minimum and maximum values set to the field in the calculator.
Multiply by Unit Price – enables the use of a unit price multiplier. When toggled on, the final value will be calculated by multiplying the selected value by the specified unit price.
Unit Price – the cost per unit of the selected value. This numeric field supports decimal values and defines how much each unit contributes to the total.
Unit – a label indicating the measurement unit used for the selected value (such as centimeters, meters, or inches).
Pricing Structure - The Pricing Structure setting defines how the Cost Calculator calculates the final value of the field based on the quantity selected by the user. Learn More.
Styles
Under this tab, you can select the suitable style for the quantity field according to your needs:
The field offers two styles: Default and Side Buttons. With the Side Buttons style, you can choose the position of the buttons and display them separately, giving you greater control over the field’s appearance:
Here are the available styles:
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 be filled or not.
Hidden by Default - The element will be hidden by default. You can make it visible using conditional system.
Calculate hidden by default - If any case hides the element: via the Hidden by Default setting or hidden by some condition, the element's default value (if it is set) will be counted in the formula.
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
Set Measurement Unit
This setting allows you to add a measuring unit (Ω, cm, kg, inch, etc.) to the field.
Unit Symbol - enter the unit symbol
Position - select the position where the symbol should be displayed relative to the number
Thousands separator - select the symbol to separate thousands
Number of decimals - indicate the number of decimals in the fractional part
Decimal separator - select the symbol to separate the fractional part
Here is how it will look:
Pricing Structure
⭐Premium Feature
The Pricing Structure setting defines how the Cost Calculator calculates the final value of the field based on the quantity selected by the user. It allows you to override the field value before it is passed to the formula field. This is especially useful for applying quantity-based discounts or custom pricing logic.
Pricing structure is available in Quantity and Basic Slider Elements.
Pricing Structure has 4 different options:
By default, the calculator uses the Default pricing structure. It just passes the entered value by the user to the formula field without changes.
Pricing Structure is not available when the Multiply by Unit Price setting is on.
When you select All Units Pricing, Tiered Pricing, or Flat Unit Price per Range, the calculator opens additional pricing settings, allowing you to configure pricing ranges and display a discount badge:
Before looking at each pricing structure, let's understand the common settings of them:
Pricing Structure - choose one of the available pricing structure options.
Pricing Range Table - on this table, you can define the range and unit price for the inputs. The range always starts from the minimum value of the element that you set, and ends with the maximum value of the element. You can add new ranges by clicking the Add another range button, and delete the last range by clicking the icon next to it.
Badge Text - here you can define the label that will be displayed in the discount badge that will be displayed along with the field.
Format - choose one of the available formats to display the discount badge on the element. There are three options:
% - displays the discounted amount in percentage
$ - displays the discounted amount in currency
$ + % - displays the discounted amount in currency and a percentage
Variants - choose the discounted badge style
Here you can see the different badges and how they look with sample examples:
Before going deep to learn about each structure, here is a quick summary of them:
Pricing Range used in the table examples
From 0 to 10 with a unit price of 17
From 11 to 100 with a unit price of 14
From 101 to 200 with a unit price of 12
From 201 to 250 with a unit price of 10
Applies one unit price to all units based on the matched quantity range
8 × 17 = 136
57 × 14 = 798
221 × 10 = 2210
Calculates each pricing range separately and sums the results
8 × 17 = 136
10 × 17 + 47 × 14 = 828
10 × 17 + 90 × 14 + 100 × 12 + 21 × 10 = 2840
Default Pricing
This is the default behavior of the Cost Calculator. The value entered by the user is passed directly to the formula field without any modification.
Example
If the user enters 25, the formula receives 25.
Use Default Pricing when no quantity-based pricing logic is required, and calculations are handled entirely inside the formula.
All Units Pricing
This option applies a single unit price to all selected units within a range. You define quantity ranges and assign a unit price for each range. Once a range is matched, all units are multiplied by the unit price of that range.
Example
Let's set the pricing range like that:
From 0 to 10 with a unit price of 17
From 11 to 100 with a unit price of 14
From 101 to 200 with a unit price of 12
Rest, from 201 to 250 with a unit price of 10
Here are the results. Switch tabs to check the difference:
User enters 8. It matches the first range. Final value is 8 × 17 = 136
User enters 57. It matches the second range. Final value is 57× 14 = 798
User enters 221. It matches the last range. Final value is 221 × 10 = 2210
Use this option when you want bulk discounts where all units get the same price once a quantity threshold is reached.
Tiered Pricing
This option applies different prices to different portions of the quantity. Each range has its own unit price and is calculated independently. The final value is the sum of all tier calculations.
Example
Let's set the pricing range like that:
From 0 to 10 with a unit price of 17
From 11 to 100 with a unit price of 14
From 101 to 200 with a unit price of 12
Rest, from 201 to 250 with a unit price of 10
Here are the results. Switch tabs to check the difference:
User enters 8. All units fall into the first range: Final value is 8 × 17 = 136
User enters 57.
First 10 units → 10 × 17 = 170
Next 47 units → 47 × 14 = 658
Final value is 170 + 658 = 828
User enters 221
First 10 units → 10 × 17 = 170
Next 90 units → 90 × 14 = 1260
Next 100 units → 100 × 12 = 1200
Remaining 21 units → 21 × 10 = 210
Final value is the sum of all: 2840.
Use Tiered Pricing when pricing must gradually decrease as quantity increases rather than switching all units to a lower price.
Flat Unit Price per Range
This option assigns a fixed value when the entered quantity falls within a specific range. Instead of multiplying units, the calculator returns a predefined flat value for the matched range.
Example
Let's set the pricing range like that:
From 0 to 10 with a unit price of 17
From 11 to 100 with a unit price of 14
From 101 to 200 with a unit price of 12
Rest, from 201 to 250 with a unit price of 10
Here are the results. Switch tabs to check the difference:
User enters 8. All units fall into the first range: Final value is 17.
User enters 57. Matched range is 11 to 100: Final value is 14.
User enters 221. Matched range is 201 to 25: Final value is 10.
Use this option when pricing is not dependent on unit count and only the selected range matters.
Fractional (Decimal) Value Input
When using the Quantity field with its default settings, it is not possible to input fractional numbers. Any fractional number entered will automatically be rounded to the nearest whole number:
Enabling Fractional Input
To allow the input of fractional numbers in the Quantity field, the Currency Settings must be enabled. This setting ensures that the Quantity field can handle and correctly display fractional values.
Here is the result:
If both Currency Settings and Round Value options are enabled, you can enter fractional values in the Quantity field. However, these values will be automatically rounded to the nearest whole number in the summary.
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.
Choose the correct styles for the fields:
That’s how it will look on the user’s page:
You can set up Multiply by Unit Price when you want the value a user inputs to multiply by 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
Was this helpful?