[Sugester V2 EN](https://sugester.intum.pl/kb/sugester-v2-en.md) / [Forms](https://sugester.intum.pl/kb/sugester-v2-en/forms.md)

# [Custom JavaScript in Forms](https://sugester.intum.pl/kb/sugester-v2-en/custom-javascript-in-forms.md)

## 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:

```javascript
(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](https://sugester.intum.com/kb/sugester-v2/warunkowe-odpowiedzi-w-formularzach-v2-ahoUdTZr)
- [Forms Module](https://sugester.intum.com/kb/sugester-v2/modul-formularze-zbieranie-zgloszen-i-danych-8Uq2CEaj)