Field Calculations

Are you wondering how you can calculate a total based on the option selected by the user from your form? With the Convert Forms Calculations Feature, you can create forms with dynamically calculated fields to display the calculated values.

It includes a Visual Calculation Builder that can help you create both single and complex calculations, such as general calculators, ideal weight calculators, calorie calculators, estimate quotes for hotel booking and rent-a-car services, price estimation quotes for appointments and services, loan and finance calculators, and many more.

• Features
• How to create a Calculation
• Assign Calculcation Values to Dropdowns, Radio Buttons and Checkboxes
• Formula Syntax
• How to display a Calculation in a HTML Field
• Frequently Asked Questions

Features

Here's what makes the Convert Forms Calculations feature a powerful tool for your forms.

• Easy and visual calculator interface.
• Use hidden fields, text fields, number, drop-down, checkbox or radio buttons.
• Supports math operators like +, -, * or /.
• Supports advanced math functions.
• Use conditional logic in calculations.
• Manage multiple calculations in a form.
• Hide calculated fields.
• Use nested calculations.
• Add a prefix or suffix to the calculated value.
• Store calculations in the database.
• Send calculated values via e-mail.
• Create custom calculations with your formula.

How to create a Calculation

Let's see how you can easily create a form calculation that displays the sum of 2 fields in a third field, as shown in the picture below.

Step 1: Create the form

In order to create a calculation, we need a form with fields, of course! In our example, we are going to use just three Text or Number fields and a submit button. Let's call the first field number 1, the second field number 2, and the third one for the calculated value, result.

Step 2: Enable Calculations option on the 3rd field

Once the form is ready and the fields are added, click on the 3rd field (where we want to display the calculated value), to open the field settings on the left. Please scroll down to find the Calculations section and click to enable it.

Step 3: Create the Calculation Formula

Although our formula is rather simple, we will use the Calculation Visual Builder to create it. The steps are shown in the animated movie but also described in the bullets below:

• Click on the Field selection dropdown and add the 1st field.
• From the toolbar, click to add the '+' math operator to our formula.
• Click on the Field selection dropdown again and add the 2nd field.
• Set the Decimal Places option to 0.
• Optionally, you can set a Prefix and Suffix to your calculation field. Note: The field that will be used must support characters, such as a Text Field. If you use a Number Field, you won't be able to see the prefix/suffix as it only supports numbers.

Done! Save your form and test it on the front end.

Assign Calculation Values to Dropdowns, Radio Buttons and Checkboxes

Calculation Values are generally used for calculations and represent an input field's numerical value. The Calculation Value of a field is different from its Value. A field's Value is what is passed into the final form submission. The Calculation Value is used when that field is used in a calculation. This feature is only available in the following fields:

• Dropdown Field
• Multiple Choice Field (Radio)
• Checkboxes Field

How to assign Calculcation Values

Select the field to assign calculation values on these fields and click to open its field settings on the left screen. Scroll to the Choices section and toggle the Use Calculation Values option to ON.

Once the Use Calculation Values option is turned ON, a third input box appears where you can type in the respective calculation value for each option.

Using the screenshot above as a template, if the user selected both “First Choice” and “Second Choice” on the front end, the saved form data would read “first_choice” and “second_choice” respectively. The Calculation Value for the field would be 30 (10 + 20, the sum of the two choice's calculation values).

Formula Syntax

Operator Precedence

The parser accepts a pretty basic grammar. It's similar to normal JavaScript expressions but is more math-oriented. For example, the ^ operator is exponentiation, not xor.

Unary operators

The parser has several built-in "functions" that are unary operators. The primary difference between these and functions is that they can only accept exactly one argument, and parentheses are optional. With parentheses, they have the same precedence as function calls, but without parentheses, they keep their normal precedence (just below ^). For example, sin(x)^2 is equivalent to (sin x)^2, and sin x^2 is equivalent to sin(x^2).

Pre-defined functions

Besides the "operator" functions, there are several pre-defined functions.

Constants

There's also a number of pre-defined constants that can be used in calculations. These are shown in the table below:

How to display a Calculation in a HTML Field

Besides that you can display the result of a calculation in an input field, you can also display the evaluated result of a calculation in any HTML element like a <span>, <p>or a <div> tag. Let's see how this is possible.

Add an HTML field from the Fields section to your form. Once added, open the HTML field settings and see the Default Value option with the rich text editor. Click the source code button in the editor's toolbar to open the Source Code dialog. Here, we must add an HTML element with specific HTML data attributes to act as a placeholder for the calculation result.

Using the example described in the How to Create a Calculation section, let's say we also want to display the sum of the two fields in an element. To make that happen, we will need to add the following HTML code:

Sum: <span data-calc="{field.number1} + {field.number2}">0</span>

In the code above, we define the same formula we've used in the hidden field using the data-calc attribute while setting the default text to 0. When a value of any of our form fields changes, the calculation will run again, and the result will be displayed within our HTML element.

Using the Calculated Value from another field

Although our calculation works, it's not that efficient. The sum of the two fields is already calculated in the Hidden field since it's ordered before the HTML field. Wouldn't it be better to pull the already computed value from the Hidden field and display it in our HTML element instead of running the same calculation repeatedly? For the sake of simplicity, our code can be rewritten as:

Sum: <span data-calc="{field.result}">0</span>

In the updated code, we set the calculation formula to match the value of the result field, which will already have the calculated value when the calculations are triggered since the calculations are executed from top to bottom. The behavior of using the estimated value of another field in a calculation is known as Calculation Nesting.

Supported HTML Attributes

Below is a list of the HTML attributes you can use to customize an inline calculation.

Frequently Asked Questions

How to use data from the database in a calculation?

How to use a query string parameter in a calculation?

When are the calculations processed?

In which order are the formulas associated with calculated fields?

How do you use conditional statements in a calculation?

{field.qty} >= 3 ? 30 : 0

if({field.qty} >= 3, 30, 0)

Can I perform calculations with dates?

setTimeout(function() {
	var checkin  = document.querySelector(".fp_check_in input.flatpickr-input")._flatpickr;
	var checkout = document.querySelector(".fp_check_out input.flatpickr-input")._flatpickr;

	checkin.set('disableMobile', true);
	checkin.set('onClose', (date) => {
		if (date != '' && checkout.selectedDates != '') {
			calculateDays(date, checkout.selectedDates);
		}
	});

	checkout.set('disableMobile', true);
	checkout.set('onClose', (date) => {
		if (checkin.selectedDates != '' && date != '') {
			calculateDays(checkin.selectedDates, date);
		}
	});

	function calculateDays(check_in, check_out) {
		var date1 = new Date(check_in); 
		var date2 = new Date(check_out); 
		
		// To calculate the time difference of two dates 
		var Difference_In_Time = date2.getTime() - date1.getTime(); 
		
		// To calculate the no. of days between two dates 
		var Difference_In_Days = Math.ceil(Difference_In_Time / (1000 * 3600 * 24));

		if (Difference_In_Days < 0) {
			Difference_In_Days = 0;
		}
		
		var el = document.querySelector('input[name="cf[number_of_days]"]');
		el.value = Difference_In_Days;
		el.dispatchEvent(new Event('input', { 'bubbles': true }));
		el.dispatchEvent(new Event('change', { 'bubbles': true }));
	}
}, 500);

Why does the field contain a previous value other than the currently calculated one?

var el = document.querySelector("#input");
el.value = 70;
el.dispatchEvent(new Event('input', { 'bubbles': true }));

var el = document.querySelector("#input");
el.value = 70;
el.closest("form").dispatchEvent(new Event('input'));

Troubleshooting

Chrome doesn't display my calculation result inside a Number Field.