Calculator in the forms

What the calculator can do

The calculator lets your visitors estimate prices, amounts, or other values in real time. As soon as they fill in the fields, the calculator applies your predefined formula and displays the result right away.

NOTE

The calculator works exclusively with numeric values (see the table below).

Main features

• 1 The calculator computes values from the data users enter, following the formula you predefine.
• 2 The “Calculation result” field supports mathematical operators and self-executing JavaScript.
• 3 Results can be displayed anywhere on the page by inserting a variable that looks like:

{{ form.ID.variableName.value }}
or
{{ form.ID.variableName.text }}.

• 4 A field value can be passed into the Hidden field of another form on the same page.
• 5 One result can be used as the basis for another calculation. This is useful for showing intermediate values, such as the original price and the discounted price.

NOTE

The calculator is available only in vertical forms.

Horizontal forms and quizzes are not supported.

How to add a calculator to your form

To add a calculator to any form on Flexbe, do the following:

Step 1. Go to the Elements catalog and add a vertical form

Step 2. Add the fields you need

Build your calculator using any of the supported field types marked with the special icon (Number, Checkbox, Radio, Select, Slider, Calculation result, Hidden field). To include a field in the calculation, simply switch its toggle on.

Step 3. Assign variable names for all calculator fields

When setting up a field, give its variable an easy-to-understand name to use it in your formula. Make sure every variable has a unique name within the same form.

NOTE

Use only Latin letters when naming variables.

Step 4. Add the “Calculation result” field

Add a Calculation result field to your form. Then enter the formula you want to use in its settings.

You can reuse this result in other formulas, for example, to calculate a discount.

Step 5. Save and check the formula

Save your changes and switch to the preview mode to make sure the calculator works correctly.

You can disable the Submit button in the form. It’s useful if you want visitors to see the calculation results without sending the form.

Creating an example calculator

Let’s build a window installation calculator that allows visitors to estimate the cost of a window along with additional options and installation fees.

We start by adding the necessary fields, enabling them for calculations, and giving each variable a unique name:

• Window height (height)
• Window width (width)
• Price per sq.ft. (price)
• Additional options (options)
• Installation fee (installation)

Then we add the Calculation result field with this formula:

(height * width * price) + options + installation

The calculator now shows the window cost in real time, using the details the visitor provides.

Using variables anywhere on the page

You can output calculator variables anywhere on the page, for example, inside the text or in the Hidden fields of other forms. Here’s how you can do this.

Step 1. Copy the variable from the calculation result settings.

You can choose between two options: All text or Value only.

Step 2. Paste the copied value to any place on the page where you want it to appear.

TIP

Variables work in texts, button labels, Hidden fields of other forms, etc.

Supported mathematical operators

You can use the following math operators for your formulas:

• width^2 or width**2 — raise to the nth power
• sqrt(width) — square root
• min(width, 10) — minimum value
• and more (see the table below)

Table of supported fields