Calculation Element

Prev Next

The Calculation element allows you to create calculations based on the inputs of elements on the form. Calculations can be performed on the Number, Calculation, Radio Buttons, Checkboxes, Select, and Date and Time elements. The calculation element has three separate inputs: Calculation, Calculation Content, and Pre-calculation Content. Calculation elements are often used when building payment forms.

For a more hands-on experience with calculations check out this interactive form.

Calculation

This is where you create the formula for your calculation adding elements from the form and any math expressions (+ - / * ).

Calculation textbox.

Insert Element

You have the option to directly insert elements from the form or a subform element, allowing you to easily select applicable form elements to add to your calculation formula. You can insert the element using the Insert Element button. This will give you a drop-down to choose between your numeric elements. Form elements added to the calculation formula are represented as {ELEMENT:element_name} where element_name will be the name of the element you select. Subform elements are represented as {ELEMENT:child_form|element_name}

Insert Element drop-down above Calculation field.

Rounding

You are also able to round your inputs using the ROUND, ROUND_UP, or ROUND_DOWN functions.

Round value example.

For example, if you wanted to round the input of your currency element to two decimal places you would use ROUND({ELEMENT:element_name}, 2).

To round an element to the nearest whole number, you would use either ROUND_UP or ROUND_DOWN. Example: ROUND_UP({ELEMENT:element_name}+{element_name})

Null Values

You are also able to have calculations with Null Values. Meaning the calculation can run without the need for all the calculation elements to have an input. This can be done using the ISNULL function similar to the ROUND function.

Isnull values example.

Include the ELEMENT in the {} curly brackets, and after the comma, add the number you want to use when the element does not have a value. In the following example, the element is treated as having a value of 0 until the user updates the element with an actual value: ISNULL({ELEMENT:element_name}, 0).

Calculation Content

This is what will be displayed once the calculation has been completed. {RESULT} is where the result of the calculation will appear. You are able to add other text around the result to help add context.

Calculation content field.

Pre-Calculation Content

This is what will be displayed before the calculation is completed. This can be used to create placeholder text for your results.

Pre-calculation content field.

Calculating Elements

Number Elements

Number elements are the most commonly used elements in calculations. In the example below we are summing two number elements and displaying the result.

Number elements calculation example.

Radio Buttons

Radio buttons are able to be used in calculation elements by using the value of the select or radio option.

Radio buttons calculation value.

These are the values that will be used in the calculation element when the radio button is selected. Let's see how this works in practice. You'll notice that not all ratings have the same effect on the score. 'Story Telling', and 'Creativity and Originality' have much more of an effect on the score than 'Cinematography' and 'Editing'.

This is due to the value placed on those radio buttons. The value of the 'Engagement' (20%) is double that of the 'Cinematography' (10%) because of how the score is calculated. This can be done by setting appropriate variables or setting them in the calculation itself.

Survey calculation example.

Checkbox Elements

Calculations can also be run using Checkboxes. When using a checkbox in a calculation, the calculation will sum all the values selected in the checkbox element. In the example below you can see the one checkbox elements whose checkbox values are being summed together.

Calculation Checkboxes example.

Select Elements

Select boxes allow the user to calculate by using the Select element. In the example below we are adding the values of two different Select elements. It is important to note that when using Select elements for calculations you must ensure that the value of the list option is a number, similar to the checkbox and radio button elements.

Calculation Select element example.

Date and Time Elements

Date and Time elements can be used in calculations for a variety of circumstances. Some examples include: calculating the time difference between days or calculating how much time an event takes. Learn how to Perform Calculations on Date / Time Fields.

In this example, we are calculating the difference between a start time and an end time within a day. The result displays the amount of time in hours.

Calculation Time element example.

Calculation Examples

Here are some simple examples of how the calculation element can be used.

Example 1 (1+2)

Here, you can see the Calculation taking in two number elements, ‘Number_1’ and ‘Number_2’, and adding the two numbers together. For the Calculation Content, we have added some helpful text before the {RESULT} to explain what is happening in the calculation. This is an optional step the only thing that needs to be displayed.

Calculation adding example.

Example 2 (Ordering Form)

Here, we are taking this to the next step by creating a simple ordering form. We have added some products (milk and eggs), and attached price modifiers.  When the user inputs the number of that specific item that they want, the calculation will add that to the total.

Order form example.