Poradnik · 6 min czytania
Jak osadzić formularz na swojej stronie internetowej
Istnieje kilka sposobów umieszczenia formularza na stronie, od jednolinijkowego fragmentu kodu po w pełni niestandardową integrację API. Ten poradnik omawia osadzenie w treści strony, wyskakujące okna modalne, komponent webowy i JS SDK oraz publiczne REST API, dzięki czemu możesz wybrać podejście dopasowane do swojego projektu.
Osadzenie w treści strony
Osadzenie w treści strony umieszcza formularz bezpośrednio w przepływie twojej strony, więc stoi między resztą treści jak każda inna sekcja. Wklejasz mały fragment kodu w miejscu, gdzie ma pojawić się formularz, a on renderuje się na miejscu, bez przekierowania, bez osobnej strony docelowej.
Najprostszą wersją jest komponent webowy: dodaj znacznik <yeetform-embed> ze slugiem swojego formularza, a formularz załaduje się w treści strony. Jeśli wolisz, ten sam efekt uzyskasz jednym wywołaniem JS SDK, które renderuje się w wybranym przez ciebie elemencie docelowym.
Wyskakujące okno lub modal
Czasem nie chcesz formularza na stronie w ogóle, dopóki ktoś o niego nie poprosi. Wyskakujące okno lub modal utrzymuje twój układ w porządku i otwiera formularz w nakładce, gdy odwiedzający kliknie przycisk, idealne do przycisków kontaktowych, widżetów opinii lub wezwania do działania w rogu ekranu.
Za pomocą JS SDK podłączasz przycisk do YeetForm.open(slug), a formularz pojawia się w wyśrodkowanym modalu nad twoją stroną. Odwiedzający wypełnia go, nigdy nie opuszczając strony, a nakładka zamyka się po wysłaniu, więc formularz nigdy nie konkuruje o miejsce z twoją główną treścią.
Komponent webowy i JS SDK
Dla większości stron komponent webowy i JS SDK pokrywają wszystko. Znacznik <yeetform-embed> to opcja bez budowania, działa w zwykłym HTML-u, w bloku CMS-a lub w dowolnym frameworku, który dopuszcza niestandardowe elementy. JS SDK daje ci programową kontrolę, gdy jej potrzebujesz.
SDK (public/sdk.js) udostępnia niewielki zestaw metod:
- YeetForm.render(slug, target, options), osadza formularz w treści strony w wybranym przez ciebie elemencie.
- YeetForm.open(slug, options), otwiera formularz w wyskakującym modalu.
- YeetForm.load(slug, lang), pobiera schemat formularza bez interfejsu, na przykład do policzenia lub sprawdzenia pól.
- YeetForm.submit(slug, answers), wysyła odpowiedź programowo z własnego kodu.
API do niestandardowych integracji
Gdy potrzebujesz pełnej kontroli, autorskiego frontendu, aplikacji mobilnej lub przepływu po stronie serwera, użyj publicznego REST API. Ma obsługę CORS, więc możesz je wywoływać bezpośrednio z kodu przeglądarki, i jest nieuwierzytelnione dla formularzy publicznych, więc do wczytania schematu lub wysłania odpowiedzi nie jest potrzebny klucz API.
Typowa integracja pobiera schemat formularza żądaniem GET, renderuje pola w dowolny sposób we własnym interfejsie, a następnie wysyła zebrane odpowiedzi z powrotem żądaniem POST. Ponieważ schemat to zwykły JSON, możesz tworzyć w pełni niestandardowe układy, podczas gdy YeetForm nadal zajmuje się przechowywaniem, powiadomieniami i analizą w tle.