Field Calculations

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, for example 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 & 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 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 calculation in a form.
• Hide calculated fields.
• Use nested calculations.
• Add a prefix or suffix to calculated value.
• Store calculations in the database.
• Send calculated values via e-mail.
• Create custom calculations with your own formula.

How to create a Calculation

Let's see how you can easily create a form calculation where you display the sum of 2 fields in a 3rd 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 3 Text or Number fields and a submit button. Let's call the 1st field number1, the 2nd field number2 and the 3rd 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 to the form, click on the 3rd field (where we want to display the calculated value), to open the field settings on the left. 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're going to 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 Text Field. If you use Number Field then you wont be able to see the prefix/suffix as it only supports numbers.

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

Assign Calculcation Values to Dropdowns, Radio Buttons and Checkboxes

Calculation Values are generally used for calculations and they represent the numerical value of an input field. 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 what 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

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

Once the Use Calculation Values option is turnt ON, a 3rd input is shown 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 actually unary operators. The primary difference between these and functions are 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 to your form from the Fields section. Once added, open the HTML field settings and see the Default Value option with the rich text editor. There, click the source code button found in the editor's toolbar to open the Source Code dialog. Here, we will need to add an HTML element with specific HTML data attributes that will act as a placeholder for the calculation result.

Using the example described in the How to create a Calculation section, let's say we want to display the sum of the 2 fields in a <span> element also. 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 we are also setting the default text to 0. When a value of any of our form fields change, the calculation we 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 2 fields is already calculated in the Hidden field since it's ordered before the HTML field. Wouldn't be better to pull the already calculated value from the Hidden field and display it in our HTML element instead of running the same calculation over and over again? 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 at the time the calculations are triggered it will already have the calculated value since the calculations are executed from top to bottom. The behavior of using the calculated value of another field in a calculation is known as Calculation Nesting.

Supported HTML Attributes

Below you can find 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 evaluated the formulas associated to calculated fields?

How to 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 fp_check_in = flatpickr(".fp_check_in input.flatpickr-input", {
		disableMobile: true,
		onClose: function(checkin_date, dateStr, instance){
			var checkout_date = document.querySelector(".fp_check_out input.flatpickr-input")._flatpickr;
			checkout_date = checkout_date.selectedDates;
			if (checkin_date != '' && checkout_date != '')
			{
				calculateDays(checkin_date, checkout_date);
			}
		}
	});

	var fp_check_out = flatpickr(".fp_check_out input.flatpickr-input", {
		disableMobile: true,
		onClose: function(checkout_date, dateStr, instance){
			var checkin_date = document.querySelector(".fp_check_in input.flatpickr-input")._flatpickr;
			checkin_date = checkin_date.selectedDates;
			if (checkin_date != '' && checkout_date != '')
			{
				calculateDays(checkin_date, checkout_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;
		}
		
		document.querySelector('input[name="cf[number_of_days]"]').value = Difference_In_Days;
	}
}, 500);

Why does the field contain the previous value 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'));