[Intum Pomoc](https://intum.pl/pomoc.md) / [Formularze](https://intum.pl/pomoc/formularze.md)

# [Formularz na stronie](https://intum.pl/pomoc/formularze/form-formularz-na-stronie.md)

Gotowy formularz trzeba jeszcze pokazać ludziom. Wkleja się go na własną stronę jako kilka linijek
kodu - raz wklejone, aktualizuje się samo, więc zmiana pytań nie wymaga ruszania strony.

> [!PATH]
> [Formularze](app:/form/forms) → *wybrany formularz*

## Wklejenie na stronę {#wklejenie-na-strone}

Na karcie formularza, w sekcji **Skrypt do wstawienia na stronie w miejscu w którym chcemy
wyświetlić ten formularz**, jest gotowy fragment do skopiowania. Wklej go na swojej stronie
dokładnie tam, gdzie formularz ma się pojawić - jeśli stronę prowadzi ktoś inny, to jest ten
fragment, który mu wysyłasz.

Fragment ma dwa elementy: skrypt, który wystarczy wkleić raz na całą stronę (nawet przy kilku
formularzach), i element `<div>` z unikalnym tokenem formularza - jeden na każdy osadzony
formularz. Formularz wczytuje się z naszego serwera, więc późniejsze zmiany pytań, tekstów i
wyglądu działają od razu, bez wklejania czegokolwiek ponownie.

## Sprawdzenie przed publikacją {#sprawdzenie-przed-publikacja}

Przycisk **Testuj** na karcie formularza otwiera stronę z osadzonym formularzem - dokładnie takim,
jaki zobaczą ludzie, pierwsze dwa pola wypełnione słowem „test" dla wygody. To jedyne miejsce, gdzie
sprawdzisz rzeczy, których podgląd w edycji nie pokazuje: czy pole obowiązkowe blokuje wysłanie, czy
działa sprawdzanie adresu e-mail i co dzieje się po kliknięciu przycisku.

> [!WARNING]
> To nie jest tryb próbny - strona testowa to ten sam formularz co na twojej witrynie. Wypełnienie
> wysłane stąd jest normalnym wypełnieniem: trafia na listę, uruchamia mapowanie i wysyła
> skonfigurowane maile tak samo, jak zgłoszenie od prawdziwego klienta. Po testach skasuj je, żeby
> nie mieszało się z prawdziwymi, a jeśli formularz ma włączone maile - licz się z tym, że test też
> je wyśle.

## Wygląd {#wyglad}

W edycji formularza, w karcie **Ustawienia formularza**:

- **Tekst przycisku zapisu formularza** - domyślnie „Wyślij". Konkretny czasownik („Wyślij
  zgłoszenie", „Zamawiam wycenę") działa lepiej niż ogólny
- **Styl formularza** - własne style CSS dopasowujące formularz do kolorystyki strony
- **Klasa CSS formularza** - dla osoby, która prowadzi twoją stronę i chce ostylować formularz
  razem z resztą serwisu
- **JavaScript formularza** - własny skrypt doklejany obok formularza, dla bardziej zaawansowanych
  integracji (np. wysyłka zdarzenia do Google Analytics po wysłaniu)

Jeśli stroną zajmuje się agencja albo informatyk, te pola są dla nich - wystarczy, że przekażesz im
dostęp do tego ekranu. Formularz i jego elementy mają gotowe klasy CSS do nadpisania we własnym
arkuszu stylów:

| Element | Klasa |
|---|---|
| Cały formularz | `.intum_form_<ID formularza>` |
| Przycisk wysyłania | `.intum_button_<ID formularza>` |
| Pole (etykieta/input/kontener) danego rodzaju | `.intum_field_<ID formularza>_<rodzaj pola>_label` / `_input` / `_div` |

`<ID formularza>` to techniczny numer formularza (widoczny np. w adresie karty formularza), a
`<rodzaj pola>` to `string`, `text`, `select`, `radio`, `checkbox`, `attachment`, `title` albo
`placeholder` - patrz [Rodzaje pól](formularze/form-pola-formularza#rodzaje-pol).

## Co widzi człowiek po wysłaniu {#co-widzi-czlowiek-po-wyslaniu}

Do wyboru są dwa zachowania, w tej samej karcie ustawień:

- **Odpowiedź po wypełnieniu formularza** - podziękowanie pokazywane w miejscu formularza. Możesz
  w nim użyć odpowiedzi z pól: pole z **Nazwą zmiennej** `imie` wstawisz jako `{{ imie }}`, więc
  da się napisać „Dziękujemy, {{ imie }} - odpowiemy w ciągu dnia roboczego"
- **Adres strony po wypełnieniu** - zamiast podziękowania przeglądarka przenosi wypełniającego na
  wskazaną stronę. Przydaje się, gdy masz własną stronę „dziękujemy", na której liczysz konwersje

Jeśli nie ustawisz żadnego z tych pól, wypełniający zobaczy krótkie potwierdzenie systemowe.

## Ochrona antyspamowa {#antyspam}

Przełącznik **Ochrona antyspamowa** włącza dwa zabezpieczenia naraz. Pierwsze to pole niewidoczne
dla ludzi, a wypełniane przez roboty (tzw. honeypot). Drugie to czas: wypełnienie wysłane szybciej
niż trzy sekundy od otwarcia strony uznajemy za robota.

Odrzucone wypełnienie nie trafia na listę i nie uruchamia maili, a wysyłający widzi to samo
podziękowanie albo przekierowanie, co przy prawdziwym wypełnieniu - dzięki temu robot nie wie, że
został rozpoznany. Warto o tym pamiętać przy bardzo krótkich formularzach: człowiek z
autouzupełnianiem w przeglądarce potrafi wysłać jedno pole szybciej niż w trzy sekundy, i takie
wypełnienie też przepadnie bez śladu błędu.

## Wstępnie wypełnione pola {#wstepnie-wypelnione-pola}

Jeśli twoja strona już coś wie o odwiedzającym, możesz podać to formularzowi z góry - w wklejonym
fragmencie, przy `data-form`, dopisz `data-field-` i **Nazwę zmiennej** pola:

```
<div data-form="TOKEN" data-field-email="jan@firma.pl" data-field-imie="Jan"></div>
```

Pola wczytają się już wypełnione, a wypełniający może je poprawić. Działa to tylko dla pól, które
mają ustawioną **Nazwę zmiennej** - patrz [Ustawienia pola](formularze/form-pola-formularza#ustawienia-pola).
Wartości można też ustawić dynamicznie z JavaScriptu na stronie, przed załadowaniem formularza,
zapisując je jako `dataset` elementu `<div>` (np. `div.dataset.fieldEmail = "jan@firma.pl"`) -
przydatne, gdy dane pochodzą z parametrów w adresie URL albo z waszego systemu logowania.

## Gdy coś nie działa {#gdy-cos-nie-dziala}

- **Wypełnienie zniknęło bez śladu, choć formularz na pewno został wysłany** - najczęściej to
  ochrona antyspamowa: ktoś wysłał formularz w mniej niż trzy sekundy od otwarcia strony (np.
  dzięki autouzupełnianiu przeglądarki). Sprawdź [Ochronę antyspamową](#antyspam) - przy bardzo
  krótkich formularzach warto ją wyłączyć
- **Formularz na stronie wygląda inaczej niż w podglądzie edycji** - podgląd w edycji nie
  uwzględnia CSS-a strony, na której formularz jest osadzony; strona testowa z przycisku **Testuj**
  pokazuje formularz dokładnie tak, jak wygląda naprawdę
- **Na stronie w miejscu formularza jest zupełnie pusto** - inaczej niż formularz nieaktywny, który
  zawsze pokazuje komunikat. Patrz [Formularz w ogóle się nie wyświetla na
  stronie](formularze/form-problemy-nie-widac)
- **Podziękowanie albo przekierowanie po wysłaniu nie działa tak, jak ustawiono** - patrz
  [Podziękowanie albo przekierowanie po wysłaniu nie działa](formularze/form-problemy-podziekowanie)
- **Testowanie przez „Testuj" zaśmieca listę wypełnień i wysyła prawdziwe maile** - to normalne,
  nie tryb próbny; jak sobie z tym radzić opisuje [Test przez „Testuj" zaśmieca listę i wysyła
  prawdziwe maile](formularze/form-problemy-testuj)