Do czego służy widget
Widget formularza pozwala osadzić formularz na dowolnej stronie internetowej — bez potrzeby tworzenia własnego kodu. Wklejasz gotowy skrypt na swoją stronę, a formularz automatycznie się załaduje i będzie zbierał dane od odwiedzających.
Jak wstawić formularz na stronę
- Otwórz formularz w panelu Intum
- W sekcji Skrypt formularza znajdziesz gotowy kod do skopiowania
- Kliknij w pole z kodem — tekst automatycznie się zaznaczy
- Skopiuj kod i wklej go w HTML swojej strony, w miejscu gdzie formularz ma się wyświetlić
Jak wygląda kod
Kod składa się z dwóch elementów:
- Skrypt JavaScript — ładuje silnik formularzy (wystarczy jeden raz na stronie, nawet jeśli masz kilka formularzy)
- Element div — kontener, w którym pojawi się formularz. Zawiera unikalny token identyfikujący Twój formularz
Możesz wstawić wiele formularzy na jednej stronie — każdy z osobnym elementem div.
Domyślne wartości pól
Możesz przekazać domyślne wartości do pól formularza za pomocą atrybutów data-field-* na elemencie div. Dzięki temu formularz automatycznie wypełni wybrane pola przy ładowaniu.
Jak to działa
- W ustawieniach pola formularza ustaw Kod pola (np.
email,imie,firma) - W kodzie embed dodaj atrybuty
data-field-{kod}z wartościami:
<script src="https://widgets.intum.net/widgets/intum-forms-widget.js"></script>
<div data-form="TOKEN"
data-field-email="jan@example.com"
data-field-imie="Jan"
data-field-firma="Firma Sp. z o.o.">
</div>
Po załadowaniu formularza pola z kodem email, imie i firma zostaną automatycznie wypełnione podanymi wartościami.
Zastosowania
- Personalizacja — wypełnij dane klienta, które już znasz (np. z CRM lub linku w mailu)
-
Kampanie marketingowe — dodaj ukryte parametry identyfikujące źródło (np.
data-field-kampania="newsletter_03") - Integracje — dynamicznie ustaw wartości z JavaScript na stronie
Dynamiczne ustawianie wartości z JavaScript
<script>
// Ustaw wartości przed załadowaniem widgetu
const formDiv = document.querySelector('[data-form="TOKEN"]');
formDiv.dataset.fieldEmail = 'jan@example.com';
formDiv.dataset.fieldImie = 'Jan';
</script>
Jak to działa
Po załadowaniu strony:
- Skrypt szuka na stronie wszystkich kontenerów z formularzami
- Pobiera treść formularza z serwera (na podstawie tokenu)
- Wyświetla formularz z polami, walidacją i przyciskiem wysłania
- Po wygenerowaniu — wypełnia pola domyślnymi wartościami z atrybutów
data-field-* - Po wypełnieniu i wysłaniu — dane trafiają do systemu, a użytkownik widzi potwierdzenie lub zostaje przekierowany
Personalizacja wyglądu
Formularz ma domyślne style, ale możesz je dostosować:
- Klasa CSS — nadaj własną klasę i styluj formularz w CSS swojej strony
- Style inline — wpisz bezpośrednio style CSS w ustawieniach formularza
- Klasa przycisku — zmień wygląd przycisku wysyłania
- Tekst przycisku — zmień napis na przycisku (domyślnie “Wyślij”)
- Własny JavaScript — dodaj dodatkowy kod JS do formularza
Zwrotka po wysłaniu
Po wypełnieniu formularza użytkownik może:
- Zobaczyć komunikat — treść HTML wyświetlona w miejscu formularza (obsługuje szablony Liquid z danymi z formularza)
- Zostać przekierowany — na podany URL (np. strona z podziękowaniem)
Zabezpieczenia
Widget ma wbudowane zabezpieczenia anti-spam chroniące przed botami i niechcianymi zgłoszeniami.
Okres aktywności
Jeśli formularz ma ustawiony okres aktywności (data od–do), widget automatycznie wyświetli komunikat o nieaktywności formularza poza tym okresem.
Wiele formularzy na jednej stronie
Możesz osadzić kilka formularzy na jednej stronie. Skrypt JavaScript wstawiasz tylko raz, a dla każdego formularza dodajesz osobny element div z właściwym tokenem.
Powiązane
- Formularze — ogólny opis modułu i typy pól
- Zgłoszenia — dane zebrane przez formularze