jQuery Form Wizard

Web-Formulare können einfach sein, aber auch ganz schön komplex werden. Besonders eklig können diejenigen werden, die auf mehrere Seiten aufgeteilt werden müssen. Die Gründe hierfür sind vielfältig, aber in der Regel sollen sie die Anzahl der ausgefüllten Formulare erhöhen. Der User füllt lieber viele kleine Formulare aus, als ein riesiges, dass kein Ende nimmt. Ausserdem können die einzelnen Seiten logisch zusammengefasst werden.

Was sich einfach anhört erzeugt primär eins für den Web-Entwickler: Arbeit. Dann anstatt ein Formular auszufüllen und die Daten nach dem Absenden zu verarbeiten hat man auf einmal ein Session-Management am Hals, da man sich die Daten der einzelnen Formulare merken muss, und diese erst dann verarbeiten kann, wenn wirklich alle Seiten korrekt ausgefüllt sind.

Screenshot des jQuery Webform Wizards

Besonders eklig wird die Angelegenheit, wenn man das Formular nachträglich ändern soll. Lustigerweise habe ich ein jQuery Plugin gefunden, dass einem die gesamte Arbeit abnimmt. Man kann damit problemlos ein Formular auf mehrere Seiten aufteilen, erhält aber am Ende trotzdem nur einen einzigen Post mit allen Daten auf einmal – und dafür braucht das knapp 3kb große Skript noch nicht einmal Cookies oder eine Session.

Der Trick ist ebenso einfach wie genial (und mal wieder eine der Sachen, wo man sich fragt, wieso man nicht selbst drauf gekommen ist). Das Plugin bedient sich der Möglichkeit ein Formular durch Fieldsets in Bereiche aufzuteilen. Das Plugin macht nichts anderes als aus den einzelnen Fieldsets eigene Seiten zu generieren. Darüber hinaus stellt es über die Seiten eine nette Navigation mit den abzuarbeitenden Schritten, und unter das Formular zwei Vor/Zurück-Buttons.

Alles in allem eine super Möglichkeit um einfach und schnell komplexe Formulare in handhabbare kleine Blöcke zu zerlegen. Der dabei entstandene Konstrukt wird vom Programmierer Wizard genannt – das halte ich zwar für etwas übertrieben, tut dem Nutzen aber keinen Abbruch. Das Plugin ist eine feine Möglichkeit ein Formular zu beeinflussen ohne den dahinter liegenden Code ändern zu müssen.

Ähnliche Beiträge

Ideale Formulare in HTML5 Zusammen mit HTML5 wurden Formulare in ihren Möglichkeiten immens aufgewertet, was prinzipiell super ist, wenn man es benutzen könnte. Es ergibt sich ...
Mit Repo.js GitHub-Repositories in die eigene Seit... GitHub ist eine echt feine Sache, ich habe trotz der recht interessanten Preisgestaltung erst vor kurzem auf einen Premium-Account gewechselt. Es mach...
HTML5 File Uploads HTML5 besteht aus ein wenig mehr als dem Canvas-Element, und vor allem aus den neuen Formular-Elementen. Gleichwohl fängt man sich mit den neuen Eleme...
Vintage Effekte für Photos mittels jQuery Ich steh ja auf diese Vintage-Effekte für Photos, und insbesondere auf die ganzen Instagram-Filter die es so gibt. Früher war es ja so, dass man diese...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.