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

Syntax Highlighting in Javascript Syntax Highlighting ist – als Blogbetreiber – eine recht anstrengende Sache. Zunächst einmal muss man WordPress erklären, dass es bitte schön die Fing...
Einfaches Sortieren von Tables mit jQuery Tabellen sind so etwas wie das persönliche Waterloo des Web-Entwicklers. Verpönt für das Design führt gerade im Backend in der Regel kein Weg an dem H...
Bacon.js – Bezier-Kurven für Texte Das Leben eines Webworkers ist nicht einfach, vor allem dann wenn man einem Kunden erklären muss, dass ein Bild mit Transparenz - auch wenn es dreimal...
Star Rating mit jQuery jRating Ich glaube die ersten die es hatten war Amazon, jene verteufelt einfache Möglichkeit einen Artikel ganz schnell mit einem bis fünf Sternen zu bewerten...

Schreibe einen Kommentar

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