Kategorien
JavaScript & jQuery Programmierung

Progression.js: jQuery-Plugin erleichtert Besuchern das Ausfüllen unvermeidlicher Formulare

Aus der englischen Grafschaft West Yorkshire, genauer aus der Großstadt Leeds, kommt ein frisches jQuery-Plugin, mit dessen Unterstützung Formularen, speziell auch langen Formularen auf engem Raum der Schrecken genommen werden kann. Mittels zweier Data-Attribute, die den Formularfeldern beigefügt werden, erhält der Verwender stets genaue Rückmeldungen dazu, wo er sich im Formular gerade befindet und was er an dieser Stelle genau zu unternehmen hat.

progression-js-01

Formulare: Unbeliebt, aber unabdingbar

Von der Wiege bis zur Bahre: Formulare, Formulare. Eine gewisse Resignation liegt in diesem alten Sprichwort, dessen Herkunft nicht eindeutig geklärt ist. Resignation, die sich auch darin begründen mag, dass Formulare in vielen Fällen tatsächlich „alternativlos“ sind, um es mal mit einem Merkelismus zu belegen.

Auch und ganz besonders im Webdesign dreht sich nahezu jede Art von Benutzerinteraktion in der einen oder anderen Weise um Formulare. Glücklicherweise lassen sich die Dinger heutzutage wenigsten anhübschen und mit zusätzlichen Funktionen versehen. Wenn ich mich an die Web-Formulare aus den Neunzigern erinnere, wird es mir jetzt noch ganz flau.

Aaron Lumsden aus dem Vereinigten Königreich stellt mit dem jQuery-Plugin Progression.js eine sehr einfach zu verwendende Methode bereit, mit der Besuchern nützliche Tipps zu jedem einzelnen Formularfeld als Tool-Tipp eingeblendet werden können. Zusätzlich kann der Tool-Tipp einen Fortschrittsbalken beinhalten, der grafisch anzeigt, an welcher Stelle in Prozent man sich im Formular gerade befindet, was ich besonders bei längeren Formularen für eine nette Funktionalität erachte. Entweder der Hinweis-Text oder der Fortschrittsbalken lassen sich ausblenden, beides gleichzeitig naheliegenderweise nicht. Wollen Sie also Ihren Besuchern lediglich die jeweilige Position im Formular signalisieren, würden Sie den Hinweistext ausblenden. In diesem Fall würde bloß eine Prozentangabe ausgegeben.

progression-js-02

Wie (gefühlt) alle aktuellen jQuery-Plugins setzt auch Progression.js auf HTML5 Data-Attribute, um die Funktionalität samt Hinweistexten zunächst unsichtbar im Sourcecode des Dokumentes unterzubringen. Erst die Behandlung durch das JavaScript sorgt für das entsprechende Erscheinungsbild.

Progression.js: Einfach eingebaut und eingesetzt

Die Integration in die eigene Website ist simpel und funktioniert in der einfachsten Variante so. Zunächst werden jQuery und Progression.js nebst zugehörigem CSS eingebunden:




Jedes Formular, das mit Progression.js ausgestattet werden soll, benötigt eine eindeutige ID:

Das Data-Attribut data-progression wird eingesetzt, um den Fortschrittsbalken zu initiieren. Das Attribut data-helper beinhaltet den eigentlichen Hinweistext. Zu guter Letzt setzen wir das Plugin auf das Formular über dessen ID an:

$(document).ready(function ($) {

    $("#myform").progression();

});

So funktioniert Progression.js mit den Standardwerten. Mehr Kontrolle über die Darstellung erlangen wir unter Verwendung einer ganzen Reihe von Parametern, die im Extremfall zu diesem Aufruf führen können:

$("#myform").progression({
        tooltipWidth: '200',
        tooltipPosition: 'right',
        tooltipOffset: '50',
        showProgressBar: true,
        showHelper: true,
        tooltipFontSize: '14',
        tooltipFontColor: 'fff',
        progressBarBackground: 'fff',
        progressBarColor: '6EA5E1',
        tooltipBackgroundColor: 'a2cbfa',
        tooltipPadding: '10',
        tooltipAnimate: true
    }); 

Ich denke, es erübrigt sich, die Optionen im Einzelnen zu erläutern. Sie verfügen über sprechende Bezeichnungen. Unter Verwendung der Darstellungsparameter dürfte ein jedes bestehendes Formular gestalterisch im Gleichklang zu unterstützen sein.

Progression.js ist knappe zwei Wochen alt und steht kostenlos auf Github zur Verfügung. Eine Lizenz ist nicht angegeben. Auf Nachfrage bestätigte mir Aaron jedoch, dass der Einsatz sowohl für private, wie auch kommerzielle Projekte ohne Einschränkungen unter GPL 2 gestattet sei.

Progression.js erinnert entfernt an Intro.js. Mit Intro.js ist allerdings noch etwas mehr möglich. Das Script ist in der Lage, Besucher gezielt zu bestimmten Neuigkeiten auf Ihrer Website zu leiten, während sich Progression.js dezidiert auf Formulare beschränkt. Der Artikel zu Intro.js ist weiter unten zu finden.

Was setzen Sie ein, wenn Sie zusätzliche Unterstützung auf einer Website realisieren wollen oder müssen?

Links zum Beitrag

  • A jQuery plugin that gives users real time hints & progress updates as they complete forms | Progression.js
  • Progression.js | Github Repository
  • Unaufdringlicher Helfer: Intro.js führt Besucher durch die Website | Dr. Web Magazin

Von Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Schreibe einen Kommentar

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