Calculated value

You use the Calculated value form element to calculate a value from the input that the user enters into a form.

Here is an example:

In this form, the idea is to calculate the costs for the tiles required to cover a roof.

Various materials are available for these roofing shingles and these materials differ in price. The final price depends on the roof area and the material selected.

First of all, the roof area is worked out using calculated values.
This requires the user to enter both the length and the width of their roof. This input is then used to calculate the roof area.

In the next step, the user selects the required material from a single choice field. The price per m² is stored for each option. The first calculated value (roof area) and the choice made here are then used to produce the second calculated value, namely the price for the shingles.

If the user then changes the size of the roof area or selects a different material, the values are immediately recalculated and the price adjusted accordingly. This gives users the chance to try out several scenarios, in which the updated price is always displayed immediately after they have made their choices.

Adding Calculated value

In the Structure area, click the green plus sign.
Navigate to General →Advanced and click Calculated value.
You can now see the form element you’ve just added in the form tree.
On the right, under Edit Calculated value, you can now adjust the settings for your new form element as required.

Please note

The new form field is added to the tree directly underneath the currently selected form element in the Structure area. If you want to change the order, you can drag and drop your form field to a new position.

Property Description
Label Enter a label, which is shown in parts of the form like the Summary, for example.
Technical name Each form element that is added to a form is automatically assigned a unique name – known as the ‘technical name’ – by Formcentric. This name is based on the designator for the form element.
Alternatively, you can generate the technical name from the label. To do this, click New from label. Find out more about the technical name.

A yellow bell as an icon.

Please note

The technical name is a required field. The technical name must start with a letter and may not contain any special characters. A technical name can be used only once within a form.

JavaScript Inside the JavaScript function brackets calculate(), enter the JavaScript code for calculating the value. This JavaScript function calculate() is executed every time that users switch pages in the form or click the submit button.
Display variant You can use this to add a CSS class from the website that you will be embedding the form into. The CSS class chosen here will be applied to the form element.

Or you can pick one or more display variants to be applied to the form element.

A yellow bell as an icon.

Please note

You cannot create user-defined display variants in this application. If you need display variants other than the standard variants, then these can be implemented. Following this, you can then select the new display variants in the application.
Please contact Support if you have any questions.

Show value in form Check Show value in form to have the result of executing the JavaScript code, i.e. the calculated value, displayed in the form.
Recalculate value in browser immediately Check Recalculate value browser immediately to have the value recalculated as soon as users have entered all of the relevant input that the JavaScript code requires in order to perform its calculation.

Do not check this box if the value should only be calculated once users switch to the next page in the form or submit the form.

An orange bell as an icon.

Please note

Check Recalculate value in browser immediately if you are linking the value to a condition. This ensures that the condition will work properly.

Using calculated values to produce a cost estimate for roofing shingles

Let’s now return to the example we described at the outset. The idea is to calculate the price for the roofing shingles. This price depends on the roof area and the material selected. In our example, the user has a single-pitched (shed) roof. Only the shingles for the roof area itself are calculated: special tiles like ridge and bargeboard tiles are not considered here.

The first step is to calculate the roof area (technical name: roofarea). To do this, two form elements are required, in which users will enter numbers for the length (technical name: length) and width (technical name: width) of their roof. Suitable fields here include the Input field as well as the predefined form element Number.
In a second step, we add the calculated value form element.
The following JavaScript snippet is used to calculate the roof area (roofarea) automatically once users have entered values for the length and width of their roof:

function calculate() {if (length && width) return parseInt(length) * parseInt(width);else return ''}

To ensure that the roof area is always calculated immediately after the user enters the length and width, Recalculate value in browser immediately is checked. The same applies to Show value in form. This ensures that the calculated value for the roof area is shown to users in the form as soon as they complete their input.
For the next step, we need a single choice field (technical name: material). The various prices are stored as values for the options here.
The following JavaScript code is used to calculate the second value, namely the price:

function calculate() {if (!isEmptyList(material) && roofarea) return parseInt(roofarea) * parseInt(material[0]);else return ''}

To ensure that the price is displayed in the form and is updated automatically – if the user selects another material, for example – the boxes Recalculate value in browser immediately and Show value in form are both checked.

The price updates automatically when users change a value or select a different material.

Two forms with different calculated values are shown.

Property	Description
Label	Enter a label, which is shown in parts of the form like the Summary, for example.
Technical name	Each form element that is added to a form is automatically assigned a unique name – known as the ‘technical name’ – by Formcentric. This name is based on the designator for the form element. Alternatively, you can generate the technical name from the label. To do this, click New from label. Find out more about the technical name. Please note The technical name is a required field. The technical name must start with a letter and may not contain any special characters. A technical name can be used only once within a form.
JavaScript	Inside the JavaScript function brackets *calculate(), enter the JavaScript code for calculating the value. This JavaScript function calculate()* is executed every time that users switch pages in the form or click the submit button.
Display variant	You can use this to add a CSS class from the website that you will be embedding the form into. The CSS class chosen here will be applied to the form element. Or you can pick one or more display variants to be applied to the form element. Please note You cannot create user-defined display variants in this application. If you need display variants other than the standard variants, then these can be implemented. Following this, you can then select the new display variants in the application. Please contact Support if you have any questions.
Show value in form	Check Show value in form to have the result of executing the JavaScript code, i.e. the calculated value, displayed in the form.
Recalculate value in browser immediately	Check Recalculate value browser immediately to have the value recalculated as soon as users have entered all of the relevant input that the JavaScript code requires in order to perform its calculation. Do not check this box if the value should only be calculated once users switch to the next page in the form or submit the form. Please note Check Recalculate value in browser immediately if you are linking the value to a condition. This ensures that the condition will work properly.