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.

Schreibe einen Kommentar