Custom JavaScript in Forms

Custom JavaScript in Forms

Each form has a Form JavaScript field (custom_js), where you can enter any JS code executed after the form is loaded. It works both in preview (show_preview) and on external pages (widget).

Where can you find this field?

Edit form → Appearance and CSS section → “Form JavaScript” field at the bottom.

How does it work?

1. The JS code is saved in fields["custom_js"] of the form (JSONB)
2. When rendering the form, the code is inserted as a <script> in the HTML
3. The Svelte widget on external pages executes the scripts after the form is loaded

Example: Conditional Field Visibility

The most common use - hiding/showing fields depending on the selected option in the select:

(function() {
  var form = document.getElementById("intum_form_6");
  if (!form) return;

  var select = form.querySelector("#result_results_26");
  if (!select) return;

  // rules: select value → list of field IDs to show
  var rules = {
    "0": [27, 29],       // Option 1 → show fields 27 and 29
    "1": [29, 30],       // Option 2 → show fields 29 and 30
    "2": [29]            // Option 3 → show only field 29
  };

  // list of all conditional fields
  var allConditional = [27, 28, 29, 30];

  function update() {
    var val = select.value;
    var show = rules[val] \|\| [];
    allConditional.forEach(function(id) {
      var el = document.getElementById("intum_field_" + id);
      if (el) el.style.display = show.indexOf(id) !== -1 ? "" : "none";
    });
  }

  // hide all conditional fields at start
  allConditional.forEach(function(id) {
    var el = document.getElementById("intum_field_" + id);
    if (el) el.style.display = "none";
  });

  select.addEventListener("change", update);
})();

How to find Field IDs?

• The form field ID is intum_field_{ID} (e.g., intum_field_27)
• The input ID is result_results_{ID} (e.g., result_results_26)
• The form ID is intum_form_{ID} (e.g., intum_form_6)
• Easiest: open the form preview and use DevTools (F12) → Inspect

Other Uses

• Field validation (e.g., checking NIP format)
• Dynamic calculations (e.g., sum of fields)
• Integration with external scripts
• Hiding form elements
• Adding custom event listeners

Limitations

• The code works only in the browser (client-side) - no access to the server
• It cannot send emails or create tasks

Related Articles:

• Conditional Responses in Forms
• Forms Module