## 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).