Przejdź do treści
Intum

Widget Formularza na Stronę

Aktualizacja: • Wyświetleń: 606 • 3 min czytania

Przejdź do sekcji

  1. Do czego służy widget
  2. Jak wstawić formularz na stronę
  3. Jak wygląda kod
  4. Domyślne wartości pól
  5. Jak to działa
  6. Zastosowania
  7. Dynamiczne ustawianie wartości z JavaScript
  8. Jak to działa
  9. Personalizacja wyglądu
  10. Zwrotka po wysłaniu
  11. Zabezpieczenia
  12. Okres aktywności
  13. Wiele formularzy na jednej stronie
  14. Powiązane

Kod widgetu

Kod do wstawienia na stronę (dostępny w widoku formularza):

<script src="https://widgets.intum.net/widgets/intum-forms-widget.js"></script>
<div data-form="TOKEN_FORMULARZA"></div>
  • TOKEN_FORMULARZA — unikalny token przypisany do formularza
  • Skrypt wystarczy wstawić raz na stronie, nawet przy wielu formularzach
  • Każdy formularz wymaga osobnego <div data-form="...">

Domyślne wartości pól

Aby przekazać domyślne wartości, dodaj atrybuty data-field-{kod_pola} na elemencie div:

<div data-form="TOKEN"
     data-field-email="jan@example.com"
     data-field-imie="Jan"
     data-field-firma="Firma Sp. z o.o.">
</div>

Mechanizm działania

  1. Każde pole formularza ma kod pola (fields["code"]) — ustawiany w edycji pola. Jeśli nie ustawiony, domyślny to field{id}
  2. Widget po załadowaniu HTML szuka atrybutów data-field-* na kontenerze
  3. Dla każdego atrybutu znajduje input z data-code="{kod}" i ustawia jego wartość
  4. Kody są sanityzowane — spacje i znaki specjalne zamieniane na _

JavaScript API

// Dynamiczne ustawianie wartości przed załadowaniem widgetu
const div = document.querySelector('[data-form="TOKEN"]');
div.dataset.fieldEmail = 'jan@example.com';
div.dataset.fieldImie = 'Jan';

// Uwaga: dataset konwertuje camelCase na kebab-case:
// div.dataset.fieldEmail → data-field-email
// div.dataset.fieldFirstName → data-field-first-name

Obsługiwane typy pól

Domyślne wartości działają dla pól z inputami: string, text, select.

Personalizacja przez API

PATCH /form/forms/:id.json

Ustawienia wyglądu widgetu w polu fields:

Klucz Opis
submit_text Tekst przycisku wysłania
form_class Klasa CSS formularza
form_style Style CSS inline
button_class Klasa CSS przycisku
form_redirect URL przekierowania po wysłaniu
form_response HTML/Liquid zwrotka po wysłaniu
form_anonymous Ukryj dane IP/agent
custom_js Własny JavaScript
antispam Włącz honeypot (1/0)

Klasy CSS widgetu

Widget generuje klasy CSS z ID formularza:

  • .intum_form_{id} — kontener formularza
  • .intum_button_{id} — przycisk wysyłania
  • .intum_field_{id}_{kind}_{type} — poszczególne pola

Możesz nadpisać te style w CSS swojej strony.

Hosting widgetu

HTML formularza jest automatycznie generowany i hostowany na S3. Po każdym zapisie formularza widget jest aktualizowany. URL widgetu zapisany w config.s3_url.