Mit JotForm erstellen Sie komplexe Formulare, ganz ohne Programmierung

Formulare zu erstellen ist zwar kein Hexenwerk; aber je umfangreicher sie werden, desto zeitintensiver wird das Unterfangen. Neben der HTML-Auszeichnung und gegebenenfalls JavaScript zur clientseitigen Validierung ist es vor allem die serverseitige Verarbeitung von Formularen, die nicht immer einfach ist. JotForm hat diese Problematik erkannt und stellt ein Werkzeug zur Verfügung, mit dem man sich komplexe Formulare einfach zusammenbauen kann. Neben vielen Eingabemöglichkeiten, die über die gängigen Formular-Elemente hinausgehen, lassen sich zudem Abhängigkeiten ohne großen Aufwand berücksichtigen. Auch das Aussehen der Formulare wird in JotForm über eine grafische Oberfläche festgelegt.

jotform

Formulare per „Drag and Drop“ zusammenstellen

Es klingt einfach und das ist es auch: Die intuitive Oberfläche von JotForm erlaubt es, Formular-Elemente einfach aus einer Liste in ein Formular zu ziehen. Dort lassen sich die einzelnen Elemente jederzeit in eine andere Reihenfolge bringen. Zur Verfügung stehen zunächst einmal alle Standard-Elemente, wie ein- und mehrzeilige Eingabefelder, Dropdown-Listen sowie Checkbox- und Radio-Buttons. Darüber hinaus lässt sich auch ein Datei-Upload einfügen, ohne dass man sich Gedanken über die Verarbeitung der hochgeladenen Dateien machen muss. Jedes Element ist auf Wunsch als Pflichtfeld zu deklarieren.

jotform_draganddrop
Per „Drag and Drop“ fügen Sie Formularfelder hinzu

Zusätzlich gibt es Elemente, um Überschriften, Texte und Bilder im Formular zu platzieren. Auch die neuen HTML5-Eingabetypen können verwendet werden. So lassen sich Eingabefelder für Telefonnummern, E-Mail-Adressen und Datumsangaben einbinden.

Um Spam zu vermeiden, steht auch eine Captcha-Funktion bereit. Neben dem klassischen Captcha hat man zudem die Möglichkeit, den Google-Dienst reCaptcha zu nutzen, bei dem „echte“ Texte anstatt generierter Wörter verwendet werden.

Individuelle Einstellungsmöglichkeiten und Vorgaben

Je nach Formularfeld stehen eine Reihe von Einstellungsmöglichkeiten zur Verfügung. Auch einige nützliche Vorgaben sind vorhanden. So kann man beispielsweise bei Dropdown-Listen US-Bundesstaaten, Länder, Monate, Tage oder die letzten 100 Jahre als Werte vorgeben. Letzteres ist beispielsweise interessant für die Angabe von Geburtstagen. Spezielle „deutsche“ Vorgaben, etwa unsere Bundesländer, stehen leider nicht zur Verfügung.

Auch bei der Darstellung der Eingabefelder gibt es viele Möglichkeiten. So lassen sich Checkbox- und Radio-Buttons ausschließlich untereinander oder in Spalten nebeneinander darstellen. Für jedes Feld kann zudem ein Tooltip mit ergänzenden Informationen hinterlegt werden.

Bewertungen und Zahlungsarten einbinden

Wer ein Produkt bewerten lassen möchte, erstellt sich ein entsprechendes Bewertungsformular. Es gibt dabei mehrere Bewertungsmöglichkeiten. So steht eine einfache Sternebewertung sowie eine komplexe Matrixbewertung, bei der mehrere Kriterien abgefragt werden können, bereit.

jotform_bewertung
Bewertungen lassen sich einfach integrieren

Auch Zahlungsarten sind einfach in ein Formular integriert. Es werden PayPal und einige andere Anbieter unterstützt. Auch eine Kaufabwicklung ohne spezielle Zahlungsart ist möglich. Selbst Bestellformulare, über welche Produkte oder Abonnements erworben werden können, sind verfügbar – inklusive der Angabe von Versandkosten.

Formularverarbeitung

Natürlich übernimmt JotForm die komplette Verarbeitung des Formulars. So wird vor dem Versenden geprüft, ob alle Pflichtfelder ausgefüllt wurden und etwaige Eingabevorgaben erfüllt sind. Beim Datei-Upload lassen sich beispielsweise eine maximale Dateigröße sowie akzeptierte Dateitypen angeben. JotForm prüft dann, ob es sich bei der hochgeladenen Datei tatsächlich um den vorgegebenen Dateityp handelt.

Über einen eigenen E-Mail-Editor wird festgelegt, wie die einzelnen Formulareingaben per E-Mail verschickt werden sollen. Standardmäßig stellt JotForm alle Eingaben tabellarisch als HTML-E-Mail dar. Mit einem eingebauten Rich-Text-Editor gestalten Sie die E-Mail individuell. Alle Bezeichnungen und Inhalte der Formular-Elemente werden als Platzhalter in der E-Mail hinterlegt.

jotform_email
Das Aussehen der E-Mails kann ebenfalls individuell festgelegt werden

Wer lieber Text-E-Mails erhält, kann auch auf den Textmodus umstellen. Per Formular hochgeladene Dateien werden nicht als Anhang mit der E-Mail verschickt, sondern sind in der E-Mail nur verlinkt. Das hat bei großen Dateien den Vorteil, dass diese nicht immer direkt mit der E-Mail heruntergeladen werden.

Als letzter Schritt der Formularverarbeitung steht bei erfolgreichem Versand die Weiterleitung zu einer Bestätigungs- beziehungsweise Dankesseite an. Hier hat man die Wahl zwischen einer von JotForm bereitgestellten Standardseite, der Ausgabe eines frei definierbaren Textes oder der Weiterleitung zu einer beliebigen URL.

Formulardaten an Dropbox oder Google Drive schicken

Nicht immer will man Formulardaten an eine E-Mail-Adresse schicken. Gerade bei Umfragen ist es wenig praktikabel, für jede Teilnahme eine E-Mail zu bekommen. Daher gibt es die Möglichkeit, die abgesendeten Formulardaten an einen Dropbox- oder Google-Drive-Zugang zu schicken. Dort wird jeder Formularversand als PDF-Datei mit allen Daten hinterlegt.

jotform_einbindungen
Einbindung von Dropbox und Google Drive möglich

Per Google Drive besteht zudem die Möglichkeit, alle Formulardaten gebündelt in einer Tabelle zu hinterlegen. Dabei wird für jedes Formular eine Tabelle angelegt, in der alle Formulardaten aufgelistet werden. So hat man direkt alle Eingaben gebündelt in tabellarischer Form vorliegen. Diese Funktion ist vor allem dann sehr nützlich, wenn man die Formulareingaben statistisch verwerten möchte. Dabei ist es durchaus machbar, die verschiedenen Funktionen wie E-Mail-Versand, Dropbox- und Google-Drive-Anbindung miteinander zu kombinieren.

Komplexe Formulare mit Bedingungen

Eine besondere Herausforderung ist es immer, wenn Eingabefelder in Abhängigkeit zu anderen Eingaben dargestellt werden sollen. Solche Bedingungen kann man per JotForm ebenfalls sehr einfach realisieren. Je nach Inhalt eines Textfeldes oder Auswahl eines Checkbox- oder Radio-Buttons lassen sich unterschiedliche Funktionen ausführen. Je nach Bedingung können dann Formularfelder dargestellt oder versteckt werden. Es lassen sich Inhalte von Eingabefeldern ändern oder bestimmte Eingabefelder als Pflichtfeld deklarieren.

jotform_bedingungen
Problemlos Bedingungen erstellen und Funktionen definieren

Aussehen festlegen

Bei so vielen individuellen Einstellungsmöglichkeiten dürfen natürlich individuelle Designmöglichkeiten für Formulare nicht fehlen. Über eine eigene Designoberfläche stellt man sich das Aussehen des Formulars selbst zusammen. Neben vorgegebenen Farbschemen können Farben für Hintergrund, Text und Eingabefelder auch ganz individuell definiert werden. Natürlich sind auch Schriftart und -größe sowie Zeilenabstand und andere Abstände einstellbar.

jotform_designer
Formular per Designer gestalten

Bei den Schriften hat man zudem Zugriff auf Google Fonts und kann aus einer Liste direkt eine Schrift seiner Wahl einbinden.

Wer ein Formular noch individueller gestalten möchte, kann den integrierten CSS-Helper verwenden. Dieser ermöglicht die Angabe von CSS-Eigenschaften für die einzelnen HTML-Elemente des Formulars. Der CSS-Helper zeigt im Formular die Klassennamen der einzelnen Elemente an, sodass man diesen beliebige CSS-Eigenschaften zuordnen kann.

Formular einbinden

Das fertige Formular muss schlussendlich noch ins eigene Webprojekt eingebunden werden. Hier stehen ebenfalls mehrere Varianten zur Verfügung. So gibt es zum einen die Möglichkeit, den Quelltext des Formulars zu kopieren und in ein HTML-Dokument einzubinden. Stylesheet- und JavaScript-Dateien bleiben jedoch auf dem Server von JotForm und werden lediglich verlinkt. Beim Verschicken des Formulars gelangt man dann zwar auf die Website von JotForm; über die Dankesseite kann man jedoch wieder auf die eigene Website verlinken.

jotform_einbindung
Formulare per Iframe, Pop-up oder Quelltext in eigenes Projekt einbinden

Alternativ kann ein Formular als Iframe eingebunden oder als Pop-up aufgerufen werden. Auch ein einfacher Verweis auf die Formularseite ist machbar. Es ist sogar möglich, sich eine individiuelle URL für ein Formular zu erstellen. Diese setzt sich zusammen aus dem Benutzernamen und einer frei wählbaren Bezeichnung für das Formular.

JotForm ist kostenlos für kleine Projekte

JotForm ist kostenlos nutzbar für Formulare, die maximal 100 mal im Monat versendet werden. Wer also zunächst nicht mit mehr versendeten Formularen rechnet, kann kostenlos loslegen. Außerdem stehen beim kostenlosen Zugang 100 MB Speicher für hochgeladene Dateien zur Verfügung. Für 9,95 US-Dollar im Monat gibt es den „Premium“-Plan, mit dem 1.000 Formularübertragungen möglich sind und in dem 10 GB Speicher zur Verfügung stehen.

Darüber hinaus gibt es noch einen „Economy“-Plan für bis zu 10.000 Übertragungen sowie einen „Professional“-Plan für bis zu 100.000 Übertragungen im Monat.

Fazit

JotForm ist ein äußerst umfangreiches Tool zum Erstellen sehr individueller und komplexer Formulare. Die Bedienung ist intuitiv und einfach. Im Handumdrehen hat man gut gestaltete Formulare, die fast keine Wünsche bezüglich Funktionalität und Aussehen offen lassen. Die Auszeichnung der Formulare erfolgt zeitgemäß per HTML5. JavaScript unterstützt bei der clientseitigen Validierung und blendet beispielsweise die Tooltips ein.

jotform_themes
Teils kostenlose Themes für schicke Formulare

Dank fertiger und teils kostenloser Themes und Templates muss man selbst gestalterisch nicht tätig werden, kann es aber, wenn man möchte. Dank zahlreicher Plug-ins ist es zudem einfach, per JotForm erstelle Formulare in ein WordPress- oder Joomla-System einzubinden. Die Anbindung an Dropbox und Google Drive ermöglicht weitere interessante und zeitsparende Möglichkeiten, Formulardaten zu verwalten und auszuwerten.

Mit dem Ende von Adobes FormsCentral ermöglicht JotForm auch den Import der in FormsCentral angelegten Formulare.

Wer JotForm einfach mal ausprobieren möchte, benötigt nicht einmal einen Zugang. Man kann direkt loslegen und Formulare zusammenstellen, gestalten und testen. Die Oberfläche von JotForm ist größtenteils ins Deutsche übersetzt. Außerdem gibt es einen Nutzerleitfaden, ein englischsprachiges Forum und englischsprachige Erklärvideos auf YouTube.

(pot/dpe)

Unter der Bezeichnung "Redaktion Dr. Web" findest du Beiträge, die von mehreren Autorinnen und Autoren kollaborativ erstellt wurden. Auch Beiträge von Gastautoren sind hier zu finden. Beachte dann bitte die zusätzlichen Informationen zum Autor oder zur Autorin im Beitrag selbst.

Sortiert nach:   neueste | älteste | beste Bewertung
Uwe
Gast
1 Jahr 1 Monat her

Habe kurz mal damit rumgespielt, das ist ein echt schönes Tool. Kann deutlich mehr als der Formular-Editor in unserem Progrämmchen. Ich werde das jetzt mal in unserem Forum vorstellen, da es auch mit IFRAMES geht ist das eine sehr schöne Alternative zur Einbindung von Google-Docs-Formularen, wie ich finde.

Johannes
Gast
11 Monate 23 Tage her

Kompliment für das sehr ausführliche und informative Tutorial zu JotForms.

trackback

[…] Source: http://www.drweb.de […]

Bas
Gast
Bas
7 Monate 26 Tage her

Hallo, das Programm scheint gut zusein.

Ich möchte gerne wissen ob man die formularinhalte als Bericht ausdrucken kann?
Sprich, der user gibt Daten in ein Formular ein diese Daten landen in der db und nun möchte ich die Daten in eine pdf Datei drucken??
Die Daten möchte ich in bestimmet Reihenfolge oder in bestimmter Stelle einer PDF anzeigen lassen. Ähnlich wie Crystal Reports von SAP.
Kann man das mit der Software auch?

trackback

[…] bei Dr. Web vor etwa einem halben Jahr eingehender mit JotForm befasst. Vielleicht möchtest du mal diesen Beitrag lesen. Ich vermute, dass er dir Appetit auf einen Test des Formular-Providers machen […]

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen