Jotform Anywhere.

Fügen Sie einen Formular-Builder zu Ihrem Webseiten-Builder hinzu.



Sehen Sie es in Aktion

Jotform Anywhere ist ein kleines JavaScript SDK, das die Fähigkeiten vom Jotform Formular-Builder in alle Webanwendungen bringt.

Jotform Anywhere bietet eine Reihe von kundenseitigen Funktionalitäten, die Sie einen Formular-Builder in Ihrer Web-Applikation einbinden lassen. Ihre Nutzer können Formulare erstellen/bearbeiten, ohne Ihre Webseite zu verlassen.


Über 7500 gebrauchsfertige Formularvorlagen

Benutzer können Formulare aus über 7500 schönen Formularvorlagen mit nur wenigen Klicks direkt einbetten.

Ready to use Form Templates

Formulargenerator

Lassen Sie Ihre Nutzer mit über 25 Formular-Frage-Typen und mehr als 350 Widgets jede Art von Web-Formularen erstellen.

Jotform Form Builder

Kopieren Sie diesen Code und fügen ihn ein, um die Javascript Bibliothek zu initialisieren:

  <script type="text/javascript" src="//js.jotform.com/JotFormAnywhere.js"></script>

Kopieren Sie den HTML-Code unten, um durch Einfügen in Ihre Seite einen Button zu erzeugen, der den Formular-Builder startet

  <button onclick="JotFormAnywhere.launchFormBuilder({});">Add Form</button>

Ein Klick auf diesen Button wird den Jotform iFrame starten (den einbettbaren Formular-Ersteller) und das erstellte/ausgewählte Formular wird standardmäßig an den Body angehängt. Lesen Sie die Dokumentation für weitere Anpassungsmöglichkeiten.


Demo sample.csv herunterladen

Was ist Jotform Anywhere

Jotform ist ein Online Formulargenerator. Mit dem Drag & Drop Formular-Editor von Jotform und seinen mehr als 7500 gebrauchsfertigen Vorlagen ist die Erstellung von Formularen schnell, einfach und macht Spaß.

Jotform Anywhere ist eine kleine JavaScript SDK, welche die Fähigkeiten des Formular-Builders von Jotform in alle Webanwendungen überträgt. Sie können den Jotform Formular-Builder so ganz leicht in Ihre Webseite einbetten und Ihre Nutzer können den Formular-Builder als Lightbox-Assistenten öffnen, ihre Formulare erstellen und diese zu ihren Webseiten hinzufügen.


Für wen ist Jotform Anywhere geeignet?

Jotform Anywhere ist besonders nützlich für Webseiten Ersteller und Blog-Anbieter. Aber es kann tatsächlich jede Art von Web-Applikation, die es Nutzern erlauben soll Formulare zu erstellen, davon profitieren.


Welche Möglichkeiten hat Jotform Anywhere momentan?

1. Formular hinzufügen
Ihre Benutzer können ein Formular an beliebiger Stelle auf der Seite hinzufügen. Ihre Benutzer können aus einer der über 7500 vorgefertigten Formularvorlagen auswählen oder den Formular-Builder verwenden, um ihr Formular zu erstellen.

2. Formular bearbeiten/löschen
Wenn ein Formular im Editor hinzugefügt wurde, kann der Benutzer mit dem Mauszeiger über das Formular fahren und auf die Schaltfläche „Bearbeiten“ klicken, um den Assistenten zur Formularerstellung erneut zu starten.

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.

Wenn Sie weitere Anforderungen haben, kontaktieren Sie uns bitte. Wir sind gerne bereit, zusätzliche Funktionen zu implementieren, um eine engere Integration zu unterstützen.


Gibt es irgendwelche Voraussetzungen oder Einschränkungen?

Sie können Jotform Anywhere ohne Erlaubnis verwenden. Sie müssen keinen API Key von uns erhalten oder eine Bewerbung ausfüllen. Kopieren Sie einfach die Code-Beispiele und fügen Sie diese ein, und schon können Sie loslegen.

Es gibt keine Einschränkungen für die Menge der Verwendungen. Sie können es auf jeder beliebigen Seite Ihrer Web-Applikation einbauen.


Müssen meine Nutzer ein Jotform Konto einrichten?

Nein, Ihre Nutzer benötigen keine Jotform Konto, um Formulare zu erstellen oder ihre Formular-Antworten per E-Mail zu erhalten. Da sie eine E-Mail-Adresse eingeben, um die Formular-Antworten zu erhalten, akzeptieren wir diese E-Mail-Adresse als Registrierung und erstellen im Hintergrund ein Gast-Konto.


Warum sollte ich Jotform Anywhere verwenden?

Wenn Sie eine Plattform haben, auf der Nutzer gerne Formulare für Ihre Seiten erstellen möchten, ist Jotform Anywhere ein großartiger Weg, ihnen diese Funktionalität zur Verfügung zu stellen.


Was soll ich tun, wenn ich weitere Fragen habe?

Bitte nehmen Sie gerne Kontakt mit uns auf. Wir helfen Ihnen gerne mit Ihren Fragen und wenn Sie weitere Hilfe benötigen, werden wir Ihnen einen Entwickler zuweisen, der Sie bei der Integration unterstützt.


Laden Sie die JotformAnywhere Javascrip Bibliothek

  <script type="text/javascript" src="//js.jotform.com/JotFormAnywhere.js"></script>

Nachdem Sie das Javascript oben geladen haben, können Sie das JotformAnywhere Objekt verwenden. Dieses JS Objekt bietet die notwendigen Methoden, um es Webseiten zu ermöglichen, Formulare über Jotform zu erstellen und einzubetten.


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.

Höchstwahrscheinlich werden Sie diese Methode als Callback eines Klick-Ereignisses aufrufen.

Beispiel
JotFormAnywhere.launchFormBuilder({
builderMaskColor: "#FFFFFF"
})
Parameter
Name Typ Beschreibung
options Object

Siehe Optionen unten

Optionen
Eigenschaft Typ Beschreibung Argument Standard
formID Statischer Text Wenn dem Builder direkt übergeben, zeigt es den Editor des dazugehörigen Formulars. Optional undefined
insertTo Statischer Text DOM CSS-Selektor, an den der Jotform iFrame angehängt wird. Optional undefined
returnIframe Boolean true, um das Jotform iFrame Element zu erhalten, der Builder iFrame wird nicht gerendert. Optional false
openInModal Boolean false, um den Builder nicht in der modalen Box zu öffnen. Optional true
builderMaskColor Statischer Text CSS-Farbcode für die Maske der modalen Builder-Box. Optional "#000000"
remember Boolean false, um die E-Mail des letzten Nutzers nicht im Speicher zu behalten Optional true

JotFormAnywhere.insertForm

JotFormAnywhere.insertForm creates a div with id "jotform_form_container_{formID}" and embeds the form inside.

Die Verwendung dieser Methode zum Einfügen von Formularen in Ihre Webseite wird sowohl für die Bearbeitung als auch für die Live-Phase dringend empfohlen

Beispiel
JotFormAnywhere.insertForm({
formID: "30647084188965",
insertTo: "#formHere",
putEditButton: false,
putDeleteButton: false
})
Parameter
Name Typ Beschreibung
options Object

Siehe Optionen unten

Optionen
Eigenschaft Typ Beschreibung Argument Standard
formID Statischer Text Formular ID, die eingefügt werden soll Pflichtfeld null
insertTo Statischer Text CSS-Selektor des DOM-Elements, in das das Formular eingefügt werden soll. Wenn Sie ihn nicht angeben, wird das Formular an den Body angehängt. Optional "body"
putEditButton Boolean Bearbeiten-Button vor dem Formular einfügen. Optional true
putDeleteButton Boolean Löschen-Button vor dem Formular einfügen. 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.

Beispiel
JotFormAnywhere.createInstantForm({
email: "me@example.com",
templateName: "contact-us"
})
Parameter
Name Typ Beschreibung
options Object

Siehe Optionen unten

Optionen
Eigenschaft Typ Beschreibung Argument Standard
email Statischer Text E-Mail, welche bei der Formularerstellung verwendet wird Pflichtfeld undefined
templateName Statischer Text Jotform Formular Vorlagen-Name (https://www.jotform.com/form-templates/Kontakt-Formular) Pflichtfeld undefined
Demo ansehen

JotFormAnywhere.editForm

Sie können den Edit-Bildschirm von eingefügten Formularen mit dieser Methode öffnen, damit Nutzer Ihre Formulare nicht durch den „Formular bearbeiten“ Button bearbeiten müssen.

Beispiel
JotFormAnywhere.editForm(
"31343042093342"
)
Parameter

Diese Methode nimmt lediglich einen erforderlichen Parameter als Formular-ID

Name Typ Beschreibung
formID String

Siehe Optionen unten


JotFormAnywhere.deleteForm

Sie können eingefügte Formulare mit dieser Methode löschen, sodass die Benutzer ihre Formulare nicht über die Schaltfläche "Formular löschen" löschen müssen.

Beispiel
JotFormAnywhere.deleteForm(
"31343042093342"
)
Parameter

Diese Methode nimmt lediglich einen erforderlichen Parameter als Formular-ID

Name Typ Beschreibung
formID String

Siehe Optionen unten

Demo ansehen

JotFormAnywhere.subscribe

JotFormAnywhere.subscribe method attaches handler to an event defined by JS library and invokes your callback when the event fires.

Beispiel

Sie möchten wahrscheinlich mit den relevanten Daten informiert werden, wenn das Formular erfolgreich in Jotform erstellt wurde.

JotFormAnywhere.subscribe("jotform.formCreated", 
function(response){
console.log("Form is created with properties:", response)
}
)

Oder wenn das Formular aktualisiert wurde

JotFormAnywhere.subscribe("jotform.formUpdated", 
function(response){
console.log("Form is updated with properties:", response)
}
)
Events

Globale Events, die Sie abonnieren können:

  • jotform.formCreated - ausgelöst, wenn Formular in Jotform erstellt wurde
  • jotform.formUpdated - ausgelöst, wenn Formular geändert und in Jotform gespeichert wurde
  • jotform.formDeleted - ausgelöst, wenn Formular gelöscht wurde
  • jotform.formLoaded - ausgelöst, wenn Formular iFrame komplett geladen wurde

Das Antwort-Objekt, welches in die Callback Funktion für den formCreated aund formUpdated Event übergeben wird, sieht wie folgt aus:

{
formEmbedUrl:"https://form.jotformpro.com/jsform/30654794751967">", 
height:465, 
width:320, 
formID:"30654794751967", 
}

Das Antwort-Objekt, welches in die Callback Funktion für den formDeleted und formLoaded Event übergeben wird, sieht wie folgt aus:

{
formID:"30654794751967", 
}

JotFormAnywhere.customize

With JotFormAnywhere.customize method you can customize default colors of the Jotform iframe

Beispiel
JotFormAnywhere.customize({
formBuilderBarColor: "#FFFFFF",
primaryButtonColor: "#FF00FF",
primaryButtonHoverColor: "blue"
})
Parameter
Name Typ Beschreibung
options Object

Siehe Optionen unten

Optionen
Eigenschaft Typ Beschreibung Argument Standard
formBuilderBarColor Statischer Text Symbolleistenfarbe des Jotform Formulargenerators Optional #FC7C03
primaryButtonColor Statischer Text Farbe des Haupt-Aktions-Buttons Optional #139045
primaryButtonHoverColor Boolean Hover-Farbe des Haupt-Aktions-Buttons Optional #16a24e
Demo ansehen