What do I mean by a calculator?

Lately, I have been busy creating so-called calculators in Drupal. These calculators are forms that allow people to calculate something. For example, whether they qualify for a subsidy and how much subsidy they might be eligible for. The tools only need to perform calculations and provide feedback to the visitor. The form is not saved or submitted.

Why create calculators in Webforms?

If you use Drupal, you could program a calculator yourself. The downside to this is:

• You need to be able to program
• You have to build everything from scratch (such as form fields and underlying logic)

The advantage is that you have more flexibility because you may encounter limitations with the Webform module that are not easily or quickly resolved.

If you choose the Webform module, you just need to install the module and you can get started. Out of the box, you already have all possible form fields (think radio buttons, check boxes, and select fields), and you can also set conditions: if a user selects option A, then show field B.

The right permissions

First, make sure you have the correct permissions. You need the 'Edit webform Twig templates' permission to be able to enter anything in a 'Computed Twig' element.

If you can't make this change yourself, ask the administrator of your website.

Use AJAX

Enable AJAX by checking the 'Automatically update the computed value using Ajax' option in the Computed Twig field. This allows the values entered by a user to be processed immediately, and the result is visible right away. So, for example, if you have a field for 'costs' and a field for 'number of hours', the computed Twig 'calculation' (e.g., costs times number of hours) is automatically updated.

Be aware that this can also cause issues. For instance, excessive recalculations may trigger the anti-spam measure and block the form.

Learn Twig

If you want to use computed Twig fields, it's useful to learn the Twig syntax. There is an extensive documentation website available.

Some handy things to know include:

• You can set your own variables with {% set variable = 'text' %} and then reuse them in your calculation
• To display a variable, use {{ variable }} (without percentage signs).
• When referring to a field from your webform, use {{ data.field_key }} where field_key is the machine name of the webform element you created earlier.
• It is more convenient to use a text field element instead of a number element because then you can use things like an input mask. You will need to convert the string to an integer because otherwise you cannot perform calculations on it. You can do this by adding |number_format() after the data element. So {{ data.costs|number_format() - data.subsidy|number_format() }}

Use a Text editor that recognizes Twig Syntax

Writing correct and functional Twig code can be challenging, especially when doing it in the field of the Computed Twig webform element. 

Therefore, I use the Sublime text editor and have installed the Twig package in it. This way, different functions are color-coded, making it easier to recognize and correct errors.

I always create a separate file where I write the Twig code and then copy it to the Webform element when I want to test it. This way, I have an extra copy of the code in case it gets lost for any reason in the Drupal Webform.

Questions or tips

Do you have any questions or tips regarding creating calculators with the Computed Twig element in Webforms? Let me know by leaving a comment below.