Calculation Field

The Calculation Field allows you to run arithmetic calculations with the values in your other form fields.

watch the Calculation Field tutorial

Play Video

Run arithmetic calculations within your form using values from your other fields with the Calculation field.

Processing an order from an Elementor Form and need to calculate the sum total, and apply a discount accordingly? Or maybe you simply need to add or multiply the values from one field with those of another, and then subtract the results with another number to display a preliminary quote, tax, or any other important number for your client’s business?

With the Calculation Field you can do this. You can even mark it as an hidden field and then use the resulting value to run calculations on other values with a second, or third, Calculation Field.

Calculation and numbering options.

The many options may seem overwhelming at first, but they’re all really straightforward. Let’s go through them:

  • Is Hidden Field?

As specified beforehand, we can hide this field so that it won’t show in the form, and then use its ID to run calculations in the composer section of another Calculation Field.

  • Default Value

This is the default number that will print in the form before any calculations are made.

  • HTML Wrapper

Specify the HTML container for the values and text in the field using the drop-down menu.

  • Before and After Text

Need to display some text before and after the value? these are the fields for it.

  • Thousand Separator

Toggle this on if you need a separator between the thousands and the hundreds, and you can then specify the preferred separator.

  • Decimal 

To calculate with decimals, toggle this on and then specify the amount of decimals to show, and a separator.

Repeater Field Integration.

The Calculation Field has been designed with the Repeater Form Field in mind. As such, we can use values from a Repeater Field to calculate the needed result. Simply Toggle on Is Repeater Field? and map the Repater Field ID, and specify the Subfield ID that contains the numerical values you need to run the calculations on.

We can then choose which operation to run from the handy drop-down menu.
For percentage-based calculations, toggle on Is Percentage and add a Base Value in its field. The result of the operations between each subsequent Repeater Subfield value will then be a percentage of the specified base value.. Toggling on Is Inverse? will instead count down from 100%, rather than towards.

Composer Field.

Here is where the magic happens if you’re not using a repeater field to collect the values to calculate with.

In a plain text format, write any simple expression using the IDs of the fields you want to do the math on, and the arithmetic symbols representing the operations you want to run. (+ for addition, – for subtraction, * for multiplication, / for division) you can also run more complex operations in this field with the use of mathematical expressions, using parenthesis.


Dependencies: Elementor Pro

Frequently Asked Questions

The Calculation Field is a feature in Gloo for Elementor Forms that allows you to run arithmetic calculations using values from other fields in your form. You can also use the result of the calculation to run further calculations in another Calculation Field.
Yes, you can mark the Calculation Field as a hidden field, so it won’t appear in the form. You can then use its ID to run calculations in the composer section of another Calculation Field.
You can run basic arithmetic operations such as addition (+), subtraction (-), multiplication (*), and division (/).
Yes, you can use values from a Repeater Field to run calculations in the Calculation Field. You just need to toggle on the Is Repeater Field option and map the Repeater Field ID, and specify the Subfield ID that contains the numerical values you want to use.


More Modules

GSAP Slider Tween New
Query Control
GTM DataLayer Connector New
JetSmartFilters: BuddyBoss Addon New
Salesforce CRM Form Action
Woo Product Discount Widget
Image Upload UI New
Interactor Engine
Google Adsense Widget
Dynamic HTML Attrributes Repeater New
Grain Control
Price+ Widget New
Device Widget New
Time Span Form Field New
JetEngine Dynamic Visibility: LearnDash Addon
Wysiwyg Field
Select2 Fields
Frontend Post Editing New
User Type Field