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. Get Form Code
JotformAnywhere javaScript library returns a form code so that you can place it on the live version of the site.You can also get additional data such as the width/height of the form from JotformAnywhere.
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
If no option is provided JotFormAnywhere.launchFormBuilder will open a modalbox including iframe provided by Jotform. All form creation/edit process is done inside this iframe.
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 creates a div with id "jotform_form_container_{formID}" and embeds the form inside.
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
Using JotFormAnywhere.createInstantForm method you can instruct JotformAnywhere library to create a form immediately after loading javascript file. Note that calling this method will publish jotform.formCreated event which you can subscribe to.
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
JotFormAnywhere.subscribe method attaches handler to an event defined by JS library and invokes your callback when the event fires.
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
With JotFormAnywhere.customize method you can customize default colors of the Jotform iframe
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 |