Formularz na stronie

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.

W aplikacji

Gdzie to znajdziesz

Formularze→wybrany formularz

Wklejenie na stronę

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ą

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.

Uwaga

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

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.

Co widzi człowiek po wysłaniu

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

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

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="[email protected]" 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. 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 = "[email protected]") - przydatne, gdy dane pochodzą z parametrów w adresie URL albo z waszego systemu logowania.

Gdy coś nie działa

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ą - 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
Podziękowanie albo przekierowanie po wysłaniu nie działa tak, jak ustawiono - patrz Podziękowanie albo przekierowanie po wysłaniu nie działa
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