Custom JavaScript w formularzach

Custom JavaScript w formularzach

Każdy formularz ma pole JavaScript formularza (custom_js), w którym można wpisać dowolny kod JS wykonywany po załadowaniu formularza. Działa zarówno w podglądzie (show_preview) jak i na zewnętrznych stronach (widget).

Gdzie znajdziesz to pole?

Edycja formularza → sekcja Wygląd i CSS → pole “JavaScript formularza” na dole.

Jak to działa?

1. Kod JS jest zapisywany w fields["custom_js"] formularza (JSONB)
2. Przy renderowaniu formularza, kod jest wstawiany jako <script> w HTML
3. Widget Svelte na zewnętrznych stronach wykonuje skrypty po załadowaniu formularza

Przykład: warunkowa widoczność pól

Najczęstsze zastosowanie - ukrywanie/pokazywanie pól w zależności od wybranej opcji w select:

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

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

  // reguły: wartość selecta → lista ID pól do pokazania
  var rules = {
    "0": [27, 29],       // Opcja 1 → pokaż pola 27 i 29
    "1": [29, 30],       // Opcja 2 → pokaż pola 29 i 30
    "2": [29]            // Opcja 3 → pokaż tylko pole 29
  };

  // lista wszystkich warunkowych pól
  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";
    });
  }

  // ukryj wszystkie warunkowe pola na start
  allConditional.forEach(function(id) {
    var el = document.getElementById("intum_field_" + id);
    if (el) el.style.display = "none";
  });

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

Jak znaleźć ID pól?

• ID pola formularza to intum_field_{ID} (np. intum_field_27)
• ID inputa to result_results_{ID} (np. result_results_26)
• ID formularza to intum_form_{ID} (np. intum_form_6)
• Najłatwiej: otwórz podgląd formularza i użyj DevTools (F12) → Inspect

Inne zastosowania

• Walidacja pól (np. sprawdzenie formatu NIP)
• Dynamiczne obliczenia (np. suma pól)
• Integracja z zewnętrznymi skryptami
• Ukrywanie elementów formularza
• Dodanie custom event listeners

Ograniczenia

• Kod działa tylko w przeglądarce (client-side) - nie ma dostępu do serwera
• Nie może wysyłać maili ani tworzyć zadań

Powiązane artykuły:

• Warunkowe odpowiedzi w formularzach
• Moduł Formularze