Contents
The Basics
This page will explain how the calculation system works in ez Form Calculator for WordPress. The plugin allows you to add element values, subtract, multiply, divide, and many more math operations with ease.
The plugin works like this:
- Element values are calculated automatically
- Values are added up from top to bottom
- Some elements might contain calculation rows (e.g. multiply with other elements)
- All calculation elements might overwrite the price from where it’s positioned (if the option ‘overwrite_price’ is set to ‘Yes’)
In general, there are many ways to set up a form. The most common ones are described below.
Default Calculation
Elements are calculated from top to bottom, so every element is added consecutively. For example, a simple order consists of only Numbers elements. The calculation is handled like this:
- Product A: 15 | Price = 15
- Product B: 20 | Price = 35
- Product C: 10 | Price = 45
- Price = 45
Advanced Calculation with Subtotal Elements
Complex calculation forms can be realized with the help of Subtotal elements. This way, multiple calculations can be created in a single form.
- Product A: 5
- Product B: 10
- Width: 100
- Height: 70
- Subtotal 1:
- Calculation: Product A * Product B = 5 * 10 = 50
- Subtotal 2:
- Calculation: Width * Height = 100 * 70 = 7000
- Subtotal 3:
- Calculation: Subtotal 1 + Subtotal 2 = 50 + 7000 = 7500
- Price = 7500
This article shows how math operators are used in the plugin.
The Calculation Flow
The following flowchart shows how the user input is processed by the plugin:
First, the (user) input is registered and the calculations of all elements in the form are processed. The calculate section in each element will be processed from top to bottom.
Afterward, the discount section is processed. Every row in the discount section will be checked if the calculated value of the element should be modified, for example, set a fixed value, increase value by a fixed percentage, modify the factor, and so on.
Subsequently, the conditional section is processed. Depending on the value of the current element, the plugin will perform conditional actions, if all conditions are met.
Calculation Examples
The following examples explain how the calculation system can be used in the plugin to create calculating forms.
Width * Height Calculation
The following form calculates the total square meters of the width and height element.
In this form, there are two Numbers elements called Width and Height as well as an additional Subtotal element called Area. Both Width and Height can be changed by the user whereas the Subtotal element calculates the area.
In order to see the calculation behind the form, click on the Area element and move to the section Calculation. The calculation rows are responsible for the area calculation.
- First, the Subtotal element retrieves the value of the Width element (let’s say the value is 10)
- Subsequently, the current value will be multiplied by the Height element (let’s say 5)
- The final calculation is 10 * 5 = 50
Calculating with Target Values
First, you must determine which value to retrieve since there are multiple ways to do this. The most common ones are 1) Raw value and 4) Calculated target value without subtotal.
- Raw value
- This will retrieve the “raw” target element’s value, i.e. the value which is displayed in the input field
- If there is a factor defined in the target element, the retrieved value will be multiplied with the factor.
- Raw value without factor
- The same as #1 but this time, the value will ignore any factor.
- Calculated target value with subtotal
- Elements like Numbers, Dropdowns, etc. where calculation rows are possible will not show the calculated value in the input field
- This option will retrieve the calculated target value with its subtotal value (i.e. the price of the current position + the calculated value)
- Calculated target value without subtotal
- The same as #3 but this time, the subtotal value will not be added to the calculated value
Generally, you can almost always use the 1) Raw value from Subtotals since these elements update their input field immediately. Other elements such as Numbers, Dropdowns, etc. where any calculation row is present should be retrieved with 4) Calculated value without subtotal.
Note: do not use 3) or 4) in the same element since this will result in an infinite loop.
Nested Calculations
Nested calculations can be created with the visual calculate editor or with the inline_calculation option in the subtotal element.
Nested Calculations with the Visual Editor
Nested calculations require open and closing brackets which you can find in the target element dropdown in the calculation section. This way, you don’t need to use placeholders anymore. If you look at the following screenshot, you can see that calculation rows are indented. This is only necessary for open and closing brackets though you can understand better how the element is calculated.
Make sure that paired open and closing brackets have the same priority or the element will not calculate correctly. You can increase/decrease priority with the left and right arrow buttons in the calculation section.
Nested Calculations with Inline Calculation
Inline calculations are only available in Subtotal elements. The code in this option will be wrapped in a JavaScript function which returns the element’s price.
This method is not as flexible as the visual calculation editor but it’s easy and fast to use. Other element’s values will be replaced when their name is placed in two curly brackets similar to the following image:
The above image contains 3 element placeholders: a, b and c. This is not a valid JavaScript statement but the plugin will replace the placeholders with the respective element values.
Formula Examples
The following examples show how specific formulas are created in the plugin’s visual calculation editor. Alternatively, you can also use the Inline_Calculation option in Subtotal elements. Its text will be wrapped in a JavaScript function.
(A + B) * C
The order of operations is read from top to bottom so no parentheses are needed in this example.
Inline Calculation: ( {{a}} + {{b}} ) * {{c}}
2 * PI * Z * Z * A
If the radius of a pizza is Z and the depth is A, then the volume of a pizza can be calculated like this:
Inline Calculation: 2 * Math.pi * Math.pow( {{z}} , 2 ) * {{a}}
M * C²
Inline Calculation: {{m}} * Math.pow( {{c}} , 2 )
y₂ – y₁ / x₂ – x₁
Inline Calculation: ( {{y2}} – {{y1}} ) / ( {{x2}} – {{x1}} )
| m + n |
Inline Calculation: Math.abs( {{m}} + {{n}} )
sin(a) + cos(b)
This formula is only available via the Inline_Calculation option.
Inline Calculation: Math.sin( {{a}} ) + Math.cos( {{b}} )
Side Notes
- Make sure that the option “overwrite_price” in the quantity elements are set to “Yes”. Otherwise, the calculated value will be added, which is wrong for this purpose.
- Calculations may be wrong when using conditionally hidden subtotal values in the first row. In order to avoid this, simply set the first calculation row to “0” (equals / no target / 0).
