Wstęp
Jotform Anywhere to małe SDK JavaScript, umożliwiające korzystanie z Kreatora Formularzy Jotform w zewnętrznych aplikacjach.
Jotform Anywhere zapewnia zestaw narzędzi, pozwalających Ci dodać Kreator Formularzy do aplikacji webowej. Twoi użytkownicy będą mogli tworzyć, edytować i wstawiać formularze bez opuszczania strony.
7500+ gotowych szablonów formularzy
Użytkownicy mogą wstawiać formularze stworzone przy pomocy naszych gotowych szablonów bezpośrednio na stronę internetową w kilkadziesiąt sekund.
Kreator Formularzy
Pozwól użytkownikom tworzyć formularze online dowolnego rodzaju z 25+ typami pytań i 350+ widżetami.
Szybki początek
Skopiuj i wklej ten kod, by zainicjalizować bibliotekę javascriptDISABLED:
<script type="text/javascript" src="//js.jotform.com/JotFormAnywhere.js"></script>
Skopiuj i wklej poniżej kod HTML, by dodać przycisk uruchamiający kreator formularzy.
<button onclick="JotFormAnywhere.launchFormBuilder({});">Add Form</button>
Kliknięcie przycisku otworzy ramkę iframe Jotform (osadzalny kreator formularzy), a utworzony/wybrany formularz zostanie automatycznie wstawiony do treści. Sprawdź dokumentację, by dowiedzieć się więcej o opcjach dostosowywania.
Wypróbuj demo
Wypróbuj demo i pobierz kod źródłowy.
Przykłady
Oto kilka przykładowych integracji Jotform Anywhere. Stworzyłeś(-łaś) już własną? Daj nam znać!
- Jak Breezi korzysta z Jotform Anywhere on their website builder as a form builder.
- Sidengo korzysta z Jotform Anywhere, by pozwolić użytkownikom tworzyć spersonalizowane formularze.
FAQ Jotform Anywhere
Czym jest Jotform Anywhere?
Jotform to kreator formularzy online. Dzięki intuicyjnemu edytorowi i kolekcji ponad 7500 gotowych szablonów, tworzenie formularzy z Jotform jest proste, łatwe i przyjemne.
Jotform Anywhere to małe SDK JavaScript pozwalające wykorzystać możliwości Kreatora Formularzy Jotform w innych aplikacjach webowych. Możesz z łatwością wstawić Kreator Formularzy Jotform do swojej aplikacji, by dać użytkownikom możliwość otworzenia go w lightboxie w celu stworzenia formularza i wstawienia go na stronę.
Dla kogo przeznaczone jest Jotform Anywhere?
Jotform Anywhere jest szczególnie przydatne w kreatorach stron internetowych i dostawców blogów, jednak może z niego skorzystać każda aplikacja webowa potrzebująca funkcji tworzenia formularzy.
Jakie funkcje oferuje Jotform Anywhere?
1. Dodaj formularz
Twoi użytkownicy mogą wstawić formularz w dowolne miejsce na stronie. Dodanie formularza otworzy okienko z kreatorem. Wystarczy wybrać jeden z gotowych szablonów lub skorzystać z kreatora, by utworzyć formularz.
2. Edytuj/usuń formularz
Po dodaniu formularza do edytora strony, użytkownicy będą mogli najechać na niego myszą i kliknąć przycisk Edytuj, by otworzyć kreator ponownie.
3. Pobierz kod formularza
Biblioteka JavaScript Jotform Anywhere zwraca kod formularza, który możesz umieścić w swojej stronie internetowej. Otrzymasz również dodatkowe dane, takie jak wysokość i szerokość.
Jeśli potrzebujesz czegoś innego, skontaktuj się z nami. Chętnie poznamy Twoje sugestie, by ulepszyć naszą integrację.
Czy są jakieś wymagania i ograniczenia?
Możesz korzystać z Jotform Anywhere bez pozwolenia. Nie wymagamy od Ciebie wygenerowania klucza API lub złożenia podania. By rozpocząć, wystarczy skopiować i wkleić odpowiedni kod.
Nie ma żadnych ograniczeń co do ilości użyć. Możesz umieścić Jotform Anywhere na dowolnej liczbie podstron swojej aplikacji internetowej.
Czy moi użytkownicy będą musieli stworzyć konto Jotform?
Nie, konto Jotform nie jest wymagane do tworzenia formularzy i otrzymywania odpowiedzi na adres e-mail. Jako, że użytkownicy wprowadzą adres e-mail, na który będą miały być wysyłane odpowiedzi, akceptujemy te adresy do rejestracji i tworzymy w tle konta gościnne.
Dlaczego warto korzystać z Jotform Anywhere?
Jeśli posiadasz platformę, której użytkownicy chcą tworzyć formularze online na swoje strony, Jotform Anywhere to świetny sposób na dostarczenie takiej funkcjonalności.
Co mogę zrobić, jeżeli mam pytania?
Skontaktuj się z nami. Z przyjemnością odpowiemy na Twoje pytania, a jeżeli będziesz potrzebować dalszego wsparcia, oddelegujemy jednego z naszych developerów do pomocy przy tworzeniu integracji.
Dokumentacja
Załaduj bibliotekę JavaScript JotformAnywhere
<script type="text/javascript" src="//js.jotform.com/JotFormAnywhere.js"></script>
Po załadowaniu powyższego skryptu, możesz korzystać z obiektu JotformAnywhere. Zapewnia on niezbędne metody, pozwalające stronom internetowym na tworzenie i wstawianie formularzy Jotform.
Methods
JotFormAnywhere.launchFormBuilder
Jeśli opcja nie zostanie podana, JotformAnywhere.launchFormBuilder otworzy wyskakujące okno z ramką iframe Jotform. Proces tworzenia i edycji formularzy będzie wykonywany wewnątrz tej ramki.
Najprawdopodobniej wywołasz tę metodę jako callback zdarzenia kliknięcia.
Przykład
JotFormAnywhere.launchFormBuilder({ builderMaskColor: "#FFFFFF" })
Parametry
Imię i nazwisko | Type | Opis |
---|---|---|
options | Object |
Zobacz opcje poniżej |
Opcje
Właściwość | Type | Opis | Argument | Domyślny |
---|---|---|---|---|
formID |
Ciąg znaków | Jeśli zostanie podany, kreator zostanie wyświetlony w trybie edycji wybranego formularza. | Optional | undefined |
insertTo |
Ciąg znaków | Selektor CSS elementu, do którego zostanie wstawiona ramka z kreatorem Jotform. | Optional | undefined |
returnIframe |
Boolean | true, by otrzymać element iframe z kreatorem Jotform, który nie zostanie wyrenderowany. |
Optional | false |
openInModal |
Boolean | false , by nie otwierać kreatora w wyskakującym oknie. |
Optional | true |
builderMaskColor |
Ciąg znaków | Kod CSS koloru okna kreatora. | Optional | "#000000" |
remember |
Boolean | false , by nie zapamiętywać adresu e-mail ostatniego użytkownika |
Optional | true |
JotFormAnywhere.insertForm
JotformAnywhere.insertForm tworzy element div z id "jotform_form_container_{formID}" i wstawia do niego formularz.
Korzystanie z tej metody do wstawiania formularzy na stronę jest zalecane zarówno na etapie edycji, jak i publikacji.
Przykład
JotFormAnywhere.insertForm({ formID: "30647084188965", insertTo: "#formHere", putEditButton: false, putDeleteButton: false })
Parametry
Imię i nazwisko | Type | Opis |
---|---|---|
options | Object |
Zobacz opcje poniżej |
Opcje
Właściwość | Type | Opis | Argument | Domyślny |
---|---|---|---|---|
formID |
Ciąg znaków | ID formularza, który ma zostać wstawiony | Wymagane | null |
insertTo |
Ciąg znaków | Selektor CSS elementu, do którego zostanie wstawiony formularz. Jeśli go nie podasz, formularz zostanie wstawiony do elementu body. | Optional | "body" |
putEditButton |
Boolean | Dodaj przycisk Edytuj przed formularzem. | Optional | true |
putDeleteButton |
Boolean | Dodaj przycisk Usuń przed formularzem. | Optional | true |
JotFormAnywhere.createInstantForm
Przy pomocy metody JotformAnywhere.createInstantForm, możesz stworzyć formularz od razu po załadowaniu biblioteki. Wywołanie tej metody spowoduje aktywację zdarzenia jotform.formCreated, którego możesz nasłuchiwać.
Przykład
JotFormAnywhere.createInstantForm({ email: "me@example.com", templateName: "contact-us" })
Parametry
Imię i nazwisko | Type | Opis |
---|---|---|
options | Object |
Zobacz opcje poniżej |
Opcje
Właściwość | Type | Opis | Argument | Domyślny |
---|---|---|---|---|
email |
Ciąg znaków | E-mail do wykorzystania przy tworzeniu formularza | Wymagane | undefined |
templateName |
Ciąg znaków | Nazwa szablonu formularza Jotform (https://www.jotform.com/form-templates/contact-form) | Wymagane | undefined |
JotformAnywhere.editForm
Ta metoda pozwala na otwieranie okna edycji wstawionych formularzy, zastępując przycisk "Edytuj formularz".
Przykład
JotFormAnywhere.editForm( "31343042093342" )
Parametry
Metoda przyjmuje jeden, wymagany parametr - ID formularza.
Imię i nazwisko | Type | Opis |
---|---|---|
formID | String |
Zobacz opcje poniżej |
JotFormAnywhere.deleteForm
Ta metoda pozwala usuwać wstawione formularze, dzięki czemu użytkownicy nie będą musieli korzystać z przycisku "Usuń formularz".
Przykład
JotFormAnywhere.deleteForm( "31343042093342" )
Parametry
Metoda przyjmuje jeden, wymagany parametr - ID formularza.
Imię i nazwisko | Type | Opis |
---|---|---|
formID | String |
Zobacz opcje poniżej |
JotFormAnywhere.subscribe
Metoda JotformAnywhere.subscribe pozwoli Ci nasłuchiwać zdarzeń zdefiniowanych przez bibliotekę JS i wykonać działanie określone funkcją callback przy ich wywołaniu.
Przykład
Prawdopodobnie chcesz otrzymywać powiadomienia z danymi po pomyślnym stworzeniu formularza.
JotFormAnywhere.subscribe("jotform.formCreated", function(response){ console.log("Form is created with properties:", response) } )
Lub, jeśli formularz został zaktualizowany
JotFormAnywhere.subscribe("jotform.formUpdated", function(response){ console.log("Form is updated with properties:", response) } )
Zdarzenia
Globalne zdarzenia, których możesz nasłuchiwać:
- jotform.formCreated - aktywowany przy stworzeniu formularza Jotform
- jotform.formUpdated - aktywowany przy dokonaniu i zapisaniu zmian w formularzu Jotform
- jotform.formDeleted - aktywowany przy usuwaniu formularza
- jotform.formLoaded - aktywowany po pełnym załadowaniu ramki
Obiekt przekazywany do funkcji callback zdarzeń formCreated i formUpdated wygląda następująco:
{ formEmbedUrl:"https://form.jotformpro.com/jsform/30654794751967">", height:465, width:320, formID:"30654794751967", }
Obiekt przekazywany do funkcji callback zdarzeń formDeleted i formLoaded wygląda następująco:
{ formID:"30654794751967", }
JotFormAnywhere.customize
Metoda JotformAnywhere.customize pozwoli Ci dostosować domyślne kolory ramki iframe Jotform.
Przykład
JotFormAnywhere.customize({ formBuilderBarColor: "#FFFFFF", primaryButtonColor: "#FF00FF", primaryButtonHoverColor: "blue" })
Parametry
Imię i nazwisko | Type | Opis |
---|---|---|
options | Object |
Zobacz opcje poniżej |
Opcje
Właściwość | Type | Opis | Argument | Domyślny |
---|---|---|---|---|
formBuilderBarColor |
Ciąg znaków | Kolor paska narzędzi kreatora Jotform | Optional | #FC7C03 |
primaryButtonColor |
Ciąg znaków | Kolor głównego przycisku akcji | Optional | #139045 |
primaryButtonHoverColor |
Boolean | Kolor głównego przycisku akcji przy najechaniu myszą | Optional | #16a24e |