Antworten auf deine Fragen:
Neues Thema erstellen

Komplexe Formulare mit JotForm - ganz ohne Programmierung

Liebe User, 

es folgt Reklame (!), da sicher ein werblicher Unterton nicht ganz abzustreiten ist. Dennoch gibt es informatorischen Mehrwert für alle, die Formulare in Websites einbinden wollen, aber nicht über die nötigen Programmierkenntnisse verfügen. Meine Empfehlung daher: einfach mal lesen!

 

Du kennst das. 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 dir ein Werkzeug zur Verfügung, mit dem du komplexe Formulare einfach zusammenklicken kannst. 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 legst du in JotForm über eine grafische Oberfläche sehr einfach fest.

Formulare per „Drag and Drop“ zusammenstellen

Es klingt einfach und das ist es auch: Die intuitive Oberfläche von JotForm erlaubt dir, Formular-Elemente einfach aus einer Liste in ein Formular zu ziehen. Dort kannst du 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 kannst du auf Wunsch als Pflichtfeld deklarieren.

Per „Drag and Drop“ fügst du Formularfelder hinzu

Zusätzlich gibt es Elemente, um Überschriften, Texte und Bilder im Formular zu platzieren. Auch die neuen HTML5-Eingabetypen kannst du verwenden. So bindest du Eingabefelder für Telefonnummern, E-Mail-Adressen und Datumsangaben kinderleicht ein.

Um Spam zu vermeiden, steht auch eine Captcha-Funktion bereit. Neben dem klassischen Captcha hast du 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 kannst du 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 hast du viele Möglichkeiten. So lassen sich Checkbox- und Radio-Buttons ausschließlich untereinander oder in Spalten nebeneinander darstellen. Für jedes Feld kannst du zudem einen Tooltipp mit ergänzenden Informationen hinterlegen.

Bewertungen und Zahlungsarten einbinden

Willst du ein Produkt bewerten lassen, erstellst du dir 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.

Bewertungen lassen sich einfach integrieren

Auch Zahlungsarten kannst du einfach in ein Formular integrieren. 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 gestaltest du die E-Mail so individuell, wie du willst. Alle Bezeichnungen und Inhalte der Formular-Elemente werden als Platzhalter in der E-Mail hinterlegt.

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 hast du 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 willst du 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 deinen Dropbox- oder Google-Drive-Zugang zu schicken. Dort wird jeder Formularversand als PDF-Datei mit allen Daten hinterlegt.

Einbindung von Dropbox und Google Drive möglich

Per Google Drive kannst du zudem alle Formulardaten gebündelt in eine Tabelle hinterlegen. Dabei wird für jedes Formular eine Tabelle angelegt, in der alle Formulardaten aufgelistet werden. So hast du direkt alle Eingaben gebündelt in tabellarischer Form vorliegen. Diese Funktion ist vor allem dann sehr nützlich, wenn du die Formulareingaben statistisch verwerten möchtest. 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 kannst du 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.

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 stellst du dir 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.

Formular per Designer gestalten

Bei den Schriften hast du zudem Zugriff auf Google Fonts und kannst aus einer Liste direkt eine Schrift deiner Wahl einbinden.

Willst du dein Formular noch individueller gestalten, kannst du 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 du diesen beliebige CSS-Eigenschaften zuordnen kannst.

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 kannst du jedoch wieder auf die eigene Website verlinken.

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, dir eine individiuelle URL für ein Formular zu erstellen. Diese setzt sich zusammen aus deinem 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. Wenn du also zunächst nicht mit mehr versendeten Formularen rechnest, kannst du 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 hast du 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 dich bei der clientseitigen Validierung und blendet beispielsweise die Tooltips ein.

Teils kostenlose Themes für schicke Formulare

Dank fertiger und teils kostenloser Themes und Templates musst du selbst gestalterisch nicht tätig werden, kannst es aber, wenn du möchtest. 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.

Wenn du JotForm einfach mal ausprobieren möchtest, benötigst du nicht einmal einen Zugang. Du kannst direkt loslegen und Formulare zusammenstellen, gestalten und testen. Die Oberfläche von JotForm ist größtenteils ins Deutsche übersetzt. Außerdem stehen dir ein Nutzerleitfaden, ein englischsprachiges Forum und englischsprachige Erklärvideos auf YouTube zur Seite. Viel Spaß beim Formulieren...

 

Komplexe Formulare mit JotForm - ganz ohne Programmierung

Spot

Nicht mehr ganz neu hier

Ich bin gerade in einem Lehrgang und habe Formulare gerade erst sehr glücklich hinter mich gebracht und hänge jetzt ziemlich durch was PHP betrifft. Deshalb ein großes Dankeschön von mir! Der Tag ist gleich etwas freundlicher geworden.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.620
Beiträge
1.538.373
Mitglieder
67.544
Neuestes Mitglied
janusbarman
Oben