Tips for creating calculators in Drupal using Webforms and the Computed Twig element

The free Webform module of Drupal offers out of the box the option to create complex calculators with the Computed Twig element. Here are some tips to help you easily, better, and faster create calculators with Drupal Webforms.
Robert Roose
By Robert Roose

Tips for creating calculators in Drupal using Webforms and the Computed Twig element

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.

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.

Meer over rekentools bouwen in Drupal

The content of this field is kept private and will not be shown publicly.

Beperkte HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.