In this example, I'm building a tool that allows a user to calculate the amount of subsidy that housing associations receive when renovating buildings.

Creating Webform Fields

First, we create a webform and the necessary elements. When creating elements, you have the choice between different types such as text fields, numbers, or radio buttons.

When working with numbers, it may seem logical to choose a number element. However, these have unwanted functionality. If you have the focus on the number field and scroll up or down, for example, to view the rest of the form, the number is decreased or increased. This happened to me a few times without realizing it, which is why I opt for text fields with an input mask. With an input mask, you can determine what a user can enter. When creating or editing a text field element, you can choose what input mask to use under 'Form Display.' For the year, I choose 'Custom...' and then '9999.' This means users must enter 4 digits.

The elements I have added are:

• Year of construction of the house (text field with input mask '9999')
• Type of house: single-family or multi-family (radio buttons)
• The compactness of the building (text field with input mask '9.9')
• Amount of energy required in kWh (text field with input mask '99')
• Amount of sustainable energy generated, which should always be 0 or less (text field with input mask '-99')

Displaying Different Results Based on User Input/Choices

Based on the values the user enters, a different 'EPV' value, the subsidy amount per square meter, is displayed on the results page. For example, if a user enters the following:

• Year of construction: 2018
• Type: single-family house
• Compactness: 0.8
• Energy requirement: 40
• Generated energy: 0

Then the EPV value will be 1.25 euros.

But if the user provides different input, the EPV value should also change. For example:

• Year of construction: 2019
• Type: multi-family house
• Compactness: 0.6
• Energy requirement: 10
• Generated energy: -20

Then the EPV value should be 1.15 euros.

First, we create a text field in the webform that can contain the variable EPV value that we can update. This field, named 'EPV value,' is set to private under the 'Advanced' tab. This means the field is not shown on the form to the visitor. It's also advisable to disable the field so that an administrator can't accidentally enter something during testing.

We set the default value to 'not applicable.' This is displayed when users enter values that make them ineligible for EPV subsidy.

Now we can adjust the value of the 'EPV value' field based on the user's input. We do this by adding various handlers after the form is submitted. These handlers are created in the webform under 'Settings > Emails/Handlers > Add Handler.'

When creating or editing the handler, you can override the value of the 'EPV value' field in the 'Update the below submission data. (YAML)' field. We do this by using the key of the field, which you can find in the elements table under 'Build.' It's the text under the 'Key' heading of the element you want to edit. We use the key 'epv' and override it by putting 'epv: 1.25 euros' in the 'Update the below submission data. (YAML)' field.

We want to ensure that the value is overridden only if certain conditions are met. We can add this under the 'Conditions' tab of the Handler. First, we indicate that the status must be 'Enabled' and that all conditions must be met before the handler is executed.

Next, we add the following conditions:

• The 'Year of construction' must be 'Less than' the number '2019.' This means the EPV value is updated only if a number less than 2019 is entered by the user.
• The 'Type of house' must be set to 'single-family' using 'Value is.'
• 'Compactness' must be 'Less than' the number '1.'
• The 'Heating requirement' must be 'Less than' the number '43.'
• The 'Generated energy' must be 'Less than or equal to' the number '0.'

Only when a user enters values in the webform that meet these conditions will this handler be triggered, and the 'EPV value' will be updated. Now it's possible to add multiple handlers that update the 'EPV value' based on other conditions.

Complex Calculation/Formula

The calculator tool also has a complex formula that comes into play when 'Compactness' is greater than '1.' The heating requirement must be (43 + 40 * (compactness - 1)). For example, if the user enters 1.5 for compactness, the entered value for 'Heating requirement' must be lower or equal to (43 + 40 * (1.5 - 1)).

To execute this formula in a webform, we use a 'Computed Twig' element and name it 'Formula' with the key 'formula.' With this field, you can perform calculations and store the result in the field. When creating a Computed Twig element, you enter the formula in the 'Computed value/markup' field in the following format {{ formula }}. In this case, {{ (43 + 40 * (data.compactness - 1)) }}.

Because the result of the formula is stored in the 'Formula' field, we can use it in the conditions of the handlers' requirements. We can create a handler where the 'Heating requirement' must be less than or equal to the result of the 'Formula' field. We do this by calling this result with the following token: [webform_submission:values:formula].

Displaying Results to the User

Now we need to ensure that the user sees the results of the calculator tool. We do this with the 'EPV value' that we have updated via the handlers based on the user's input fields.

As soon as the user clicks the submit button, it's possible to display a message. We set this up under 'Settings > Confirmation' in the webform. In the 'Confirmation message,' you can display the 'EPV value' by using the following token '[webform_submission:values:epv]'. As you can see, we use the 'epv' key that we updated via the handler. The confirmation message can be further supplemented with explanations or by repeating the other entered values.

Drupal + Webform = Low-code Calculator Configurator

As you have discovered, Drupal in combination with the Webform module is extremely suitable for creating calculators with complex logic. By using handlers, conditions, tokens, and the Computed Twig field, you have few limitations as an ambitious site builder when creating such tools.

If you have any questions or comments about the above, please leave a comment below.