Calculations

Use Calculations when one field value should be derived from other fields instead of typed manually.

Calculations are useful for totals, scores, simple pricing, conditional formulas, and showing a result before final submission. They use expression syntax and field references, not Twig.

Key settings

• Formula - Define the expression used to calculate the field value.
• Variable picker - Insert references to other fields without typing handles manually.
• Prefix and suffix - Add display text such as currency symbols or units.
• Decimal handling - Control how numeric results are rounded or formatted.
• Visibility - Decide whether the calculated value should be shown to the user.

Field input values

Calculations work best with fields that produce numeric values. Number fields are read as numbers, and numeric-looking text values are cast to numbers before the formula is evaluated. That keeps expressions such as 1 + 2 numeric instead of joining the values as text.

For example, if {field:a1b2c3} is entered as 2 and {field:d4e5f6} is entered as 19.95, this formula returns 39.9 before any number formatting is applied:

{field:a1b2c3} * {field:d4e5f6}

Empty numeric values are treated as 0 for Number fields. Text or Email fields can be referenced, but they are safest for comparisons or string output rather than arithmetic unless their submitted values are always numeric.

Field references

Use the variable picker in the formula editor to insert fields from the current form. Formie inserts stable field-reference tokens such as:

{field:a1b2c3}

Do not type a field handle directly in braces. Calculation formulas expect Formie field-reference tokens, and the actual reference value is generated by the picker.

Some fields expose more than one referenceable value. When a field has sub-values, the token can include a selector after the field reference:

{field:a1b2c3:firstName}

The picker is the safest way to insert these references because it knows which fields and selectors are available for the formula.

Reference transforms

Formie field references can include transforms in variable-aware contexts. Transforms are encoded on the reference token after the source value:

{field:a1b2c3;transform=round}

Some transforms accept parameters:

{field:a1b2c3;transform=format;decimals=2;decimalPoint=.;thousandsSeparator=,}

Available transforms include:

For calculation formulas, prefer the formula operators and the Calculations field’s number formatting settings for the final result. Use picker-generated references so the formula stays aligned with the field references Formie expects.

Formula syntax

Calculations use an expression syntax based on Symfony Expression Syntax (opens new window). They do not support Twig.

Reference another field with the variable picker, which inserts a field-reference token:

{field:a1b2c3}

Use arithmetic operators for numeric calculations:

({field:a1b2c3} * 50) + ({field:d4e5f6} * 25)

Use comparison and logic operators for conditional expressions:

{field:a1b2c3} > 10 and {field:d4e5f6} < 100

Other supported operators include strict comparisons such as === and !==, regex matching with matches, array checks with in and not in, ranges with .., and bitwise operators such as &, | and ^.

Use a ternary expression when the result depends on a condition:

{field:a1b2c3} >= 10 ? {field:a1b2c3} * {field:d4e5f6} * 0.9 : {field:a1b2c3} * {field:d4e5f6}

Use the string concatenation operator when the result should be text:

{field:a1b2c3:firstName} ~ " " ~ {field:a1b2c3:lastName}

Keep formulas focused and test them in the field settings before publishing the form. If a formula depends on external data or complex branching, custom code or an integration is usually easier to maintain.

Submitted value

Calculations stores the calculated result. The submitted value is derived from other fields, so integrations and exports should treat it as computed output rather than user-entered input.

When querying or saving submissions through GraphQL, the field handle is used as the field name. Query the form’s formFields and include inputTypeName if you need to confirm the generated input type for a specific form.

Theme config

The Calculations field can be targeted with the calculations theme config key.

{{ craft.formie.renderForm('contactForm', {
    themeConfig: {
        calculations: {
            fieldInput: {
                attributes: {
                    class: 'my-calculation-output',
                },
            },
        },
    },
}) }}

Use theme config for class and attribute changes. Use a template override only when the calculated output markup needs to change.

For full Tailwind, Bootstrap and other framework examples, see Formie theme configs (opens new window).

Front-end reference

Calculations need Formie’s front-end JavaScript to update as dependent fields change. If you custom-render the form, keep the required front-end assets and field data available.

The front-end docs live on the separate browser UI reference site and cover rendered markup, data attributes, styling classes and JavaScript behavior for custom front-end implementations.

• Calculations

Related fields

• Use Number for user-entered numeric values.
• Use Summary to show a review of calculated and submitted values before final submission.