5 JavaScript Lösungen für bessere Webformulare

Wer im Web einen Newsletter anbietet, Waren verkauft oder einen Dienst mit Nutzerregistrierung oder Daten-Upload betreibt, kommt in der Praxis um Webformulare nicht herum. Dabei sind diese für den Erfolg des Angebots ein wahrer Flaschenhals. Bei kaum einem Element auf Webseiten ist die Abbruchquote so hoch wie bei Formularen auf Internetseiten. Eine nutzerfreundliche und seriös wirkende Aufmachung ist also Pflicht. Die folgenden fünf JavaScript Lösungen helfen, die Interaktions-Elemente professionell und mit einer guten Usability zu gestalten.

jQuery Credit Card Validator von Pawel Decowski

Kreditkarten sind in Deutschland nicht unbedingt der Schlager, doch wer im Netz Waren oder Dienstleistungen verkaufen möchte, kommt meist um die Plastikkarten nicht herum. Die Validierung der Karten ist dabei ein Basisschritt und gleichzeitig ein heikles Thema. Denn wenn es um Geld geht, werden angehende Käufer schnell nervös, daher sollte ein solches Webformular seriös wirken. Mit der jQuery Lösung muss sich niemand Gedanken um eine professionelle Validierung machen. Auch Know-how dazu, wie Kreditkarten validiert werden, ist nicht erforderlich. Das Plug-in liefert praktisch alles Notwendige mit und für die Einbindung in eine Website sind nur wenige Codezeilen nötig.

Möglich ist die Validierung für Kreditkarten von:

• American Express
• Diners Club Carte Blanche
• Diners Club International
• Discover Card
• JCB • Laser
• Maestro
• MasterCard
• Visa
• Visa Electron

Mail-Checker

Egal, ob Newsletter oder die Registrierung für ein Nutzerkonto – solche Prozesse kommen nicht ohne die Angabe einer Mailadresse aus. Tippfehler der Nutzer erfolgen leicht und treiben schnell die Bounce Rate bei den Confirmation-Mails nach oben. Der Mail-Checker von Kicksend hilft, die Eingabe der Mailadressen zu optimieren und bietet seriösen Nutzern eine gute Usability. Dazu werden bei Fehleingaben Korrekturvorschläge gegeben.

Sollen gleich ganze Registrierungsformulare ausgefüllt werden, ist der Funktionsumfang des Mail-Checkers etwas zu klein. Dann hilft die validate.js Library mit einer ganzen Reihe an Prüfregeln und der Möglichkeit, individualisierte Fehlermeldungen auszugeben oder das Ideal Forms Framework.

Validate.js

Validate.js bietet für Formularfelder zahlreiche Prüfregeln und die Möglichkeit, Fehlermeldungen individuell anzupassen. Eigene Regeln lassen sich über Callbacks implementieren. Laut der Projektseite kommt die JavaScript-Lösung ohne Abhängigkeiten aus und arbeitet mit allen gängigen Browsern inklusive dem immer wieder problematischen Internet Explorer 6.

Ideal Forms

Formulare müssen heute nicht mehr nur auf dem Desktop funktionieren. Das mobile Internet boomt. Auch auf dem Smartphone und Tablet-PC müssen diese gut aussehen. Möglich macht die Endgerät übergreifend gute Usability das Responsive Design. Mit dem Ideal Forms Framework erhalten Webseitenentwickler eine Lösung mit Keyboard Support, die es ermöglicht, schnell robuste responsive HTML5 Webformulare zu bauen.

Doch das ist nicht alles, was Ideal Forms leistet. Das jQuery Plug-in unterstützt auch die Validierung der Nutzereingaben. Unterstützt werden nach Angaben der Ideal Forms Macher die Browser Internet Explorer 8+, Google Chrome, Firefox, Opera, iOS5+ und Android 4.0+. Die Lizenz von Ideal Forms ist wahlweise GPL oder MIT.

Die Liste an Features ist lang. Die Multiple File Selection ist dabei ein bescheidener Anfang. Der drag&drop Support ist hingegen ein Highlight, das gibt einen wahren Boost in Sachen Usability. Fortschrittsbalken schieben den Nutzer beim Upload nicht ohne Infos in die Warteschleife. Zudem punktet das jQuery Plug-in mit cross-domain support und mit Resumable Uploads. Praktisch für Bilder-Uploads ist zudem die client-size Image-Rezise Funktion dieses Tools.

Laut Github-Projektseite arbeitet die jQuery-Lösung mit allen gängigen Server-Side Plattformen, die Standard HTML File-Uploads unterstützen. Lang ist zudem die Liste der unterstützten Browser:

Desktop

• Google Chrome
• Apple Safari 4.0+
• Mozilla Firefox 3.0+
• Opera 11.0+
• Microsoft Internet Explorer 6.0+

Mobile

• Apple Safari (iOS 6.0+)
• Google Chrome (iOS 6.0+)
• Google Chrome (Android 4.0+)
• Standard-Browser (Android 2.3+)
• Opera Mobile 12.0+