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

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...
Smint – vernünftiges Menü für Onepage Layout... Onepage-Seiten sind eine sehr feine Sache, vor allem für Portfolios wo es in der Regel eh nicht viel zu sagen gibt außer "kauf mich". Sollte ich jemal...
jFontSize – dynamische Font-Size mittels jQu... Ich entwickele zur Zeit einen Magento-Shop für Silver Surfer. Natürlich gibt es da besondere Ansprüche, und eine davon ist die klare Lesbarkeit der Se...
jQuery & Single Page Websites Derzeit schwer im Trend sind Single Page Websites. Dies sind sie zwar schon länger, aber die "neuen" Single Page Websites enthalten durchaus einiges a...

Schreibe einen Kommentar

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