HTML Formulare effektiv gestalten

Die Kommunikation mit den Besuchern der eigenen Website ist für viele Betreiber essentiell. Aus diesem Grund werden Kontaktformulare verwendet. Auch für eine Sign-Up-Routine ist ein Formular notwendig. Bei der Gestaltung der Formulare können verschiedene Strategien angewendet werden, um gute Conversions zu erreichen.

» Demo (Formulare)

Grundlagen der Formulargestaltung

Das Formular so simpel wie möglich halten
Umso weniger Eingabefelder ein Formular besitzt, desto schneller kommt der Nutzer an das gewünschte Ziel. Bei Registrationsformularen kann bereits die Angabe einer E-Mail Adresse genügen, um sich erfolgreich registrieren zu können. Der Nutzer erhält ein automatisch generiertes Passwort und einen Bestätigungslink seiner E-Mail Adresse für ein Double-Opt-In bequem per E-Mail. Sobald der Nutzer sich zum ersten Mal erfolgreich angemeldet hat, können ihm Optionen angeboten werden, um z. B. das Passwort zu ändern, einen Benutzernamen zu wählen oder eine Adresse anzugeben.
Bei Kontaktformularen sollte die Angabe von Name, Kontaktadresse (Telefon, E-Mail Adresse etc.) und der Nachricht ausreichen, um in Kontakt treten zu können. Sollten weitere Eingabemöglichkeiten angeboten werden, sollte der Nutzer von dem Mehrwert überzeugt sein. Zum Beispiel kann bei großen Unternehmen die Wahl eines direkten Ansprechpartners (Technik, Beratung, Verkauf etc.) dem Kunden das Gefühl vermitteln, dass seine Nachricht schneller bearbeitet wird, wenn diese direkt dem Experten zugestellt wird.

Das Formular so kurz wie möglich halten
Umso kürzer das Formular erscheint, desto kürzer schätzt der Nutzer die Bearbeitungs- bzw. Ausfüllzeit ein. Zum einen kann dies durch obigen Punkt sichergestellt werden und zum anderen lässt sich Platz sparen, wenn Beschriftungen (sog. Labels) von Eingabefeldern neben diesen stehen. Paradoxerweise ist jedoch die Bearbeitungszeit von Formularen tatsächlich geringer, wenn die Beschriftungen oberhalb der Eingabefelder stehen. Das Formular lässt sich besser »scannen«, denn die Augen müssen nicht von links nach rechts und wieder diagonal nach links eine Zeile tiefer springen, sondern können einer vertikalen Linie folgen.
Ich empfehle, bei einer Zielgruppe, die ständig mit Formularen zu tun hat (evtl. um Kommentare zu schreiben) und daher die notwendigen Eingaben schon kennen, die Labels oberhalb der Eingabefelder zu platzieren. Sofern Eingaben gemacht werden sollen, die der Nutzer nicht regelmäßig macht z. B. Kontoverbindung, sollten die Labels neben den Eingabefeldern stehen.
Das Formular sollte immer auf den sichtbaren Bildschirmbereich beschränkt werden. Sind so viele Eingaben nötig, dass das Formular nicht mehr auf eine Seite passt, sollte dieses in mehreren Schritten auf weiteren Seiten abgearbeitet werden. (Dieser Punkt wird weiter unten wieder aufgegriffen)

Dem Nutzer Hinweise geben
Sofern das Formular gut durchdacht ist, sollten bereits die Labels selbsterklärend sein, sodass auf eine einführende Erklärung zur Benutzung des Formulars verzichtet werden kann. Pflichtfelder sollten sich von optionalen Eingabefeldern unterscheiden. Gerne wird dies durch Auszeichnung mit einem Asterisk (*) gemacht. Wenn der Nutzer jedoch falsche oder unvollständige Angaben macht, sollte dieser auf diesen Missstand in angemessener Weise hingewiesen werden. Fehlermeldungen lassen sich in verschiedenster Weise kommunizieren. Denkbar ist ein PopUp (JavaScript Alert), das beim Absenden des Formulars eine Fehlermeldung anzeigt. Möglich ist auch ein JavaScript, das durch Ajax die Eingaben direkt validiert und die Fehlermeldung »live« kommuniziert noch bevor das Formular abgeschickt wurde. Die gängigste Methode ist jedoch, nach dem Absenden des Formulars, dem Nutzer eine Fehlermeldung ober- oder unterhalb des Formulars zu kommunizieren.

Fehlermeldung effektiv kommunizieren
Die Fehlermeldung wird am besten kommuniziert, wenn diese nicht nur »niedergeschrieben« wird, sondern entsprechend gestaltet wird. Eine rote Schriftfarbe oder ein Fehler-Icon helfen dem Nutzer, die Fehlermeldung direkt zu erkennen. Ferner sollte auf sinnvolle Fehlerbeschreibung geachtet werden. »Sie haben eines der Felder nicht korrekt ausgefüllt« lässt den Nutzer nicht auf Anhieb seinen Fehler erkennen. »Sie haben keine E-Mail Adresse angegeben« weist den Nutzer direkt auf seinen Fehler hin. Die Fehlermeldung kann durch eine Vorhebung des Eingabefeldes, das nicht über eine korrekte Eingabe verfügt, unterstützt werden. Der Nutzer kann somit auch das genannte Eingabefeld schneller wahrnehmen. Jenes Eingabefeld kann z. B. durch einen roten Rahmen hervorgehoben werden.

XHTML Markup am Beispiel eines Login-Formulars

<form action="/formular.php" method="get">
	<fieldset>
		<legend>Bitte einloggen</legend>
		<label for="email">E-Mail:</label>
		<input type="text" name="email" id="email" class="text" />
		<label for="feld2">Passwort:</label>
		<input type="password" name="passwort" id="passwort" class="text" />
		<input type="submit" value="Anmelden" class="submit" />
	</fieldset>
</form>

Bei der Verwendung von Labels ist darauf zu achten, dass das Attribut »for« als Wert die »id« des zugehörigen Eingabefeldes »input« hat. Gerne kann auch auf das »legend«-Tag verzichtet werden. Durch CSS kann das Formular nun optisch angepasst werden (es wird folgendes Reset CSS vorausgesetzt: reset.css):

Login-Formular Beispiel 1

form{width:132px; margin:5px; padding:0;}

fieldset{margin:0; padding:10px; border:1px solid #ccc;}

legend{display:none;}

label{display:block; color:#aaa;}

input{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#303030;}

input.text{width:100px; border:1px solid #a1a1a1; border-color:#a1a1a1 #ededed #ededed #a1a1a1; margin:2px 0 5px 0; padding:2px; height:15px;}

input.submit{cursor:pointer; width:106px; font-size:12px; border:1px solid #ededed; border-color:#ededed #a1a1a1 #a1a1a1 #ededed; height:21px;background:#f7f7f7;}

Obiges CSS liefert nun folgendes minimalistische Formular:

Login-Formular Beispiel 2

form{width:132px;margin:5px;padding:0; background:#95b6d8; -moz-border-radius:6px;}

fieldset{margin:0;padding:15px;border:0;}

legend{display:none;}

label{display:block; color:#fff;}

input{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#369;}

input.text{width:100px; -moz-border-radius:6px; margin:2px 0 5px 0; padding:2px; border:1px solid #369; color:#369;}

input.submit{cursor:pointer; float:right; -moz-border-radius:6px; border:1px solid #369; background:#fff; height:21px; width:70px;}

Durch die Eigenschaft »-moz-border-radius« lassen sich die Kanten sogar abrunden (funktioniert nur im Firefox und Mozilla). Das Formular sieht nun so aus:

Login-Formular Beispiel 3

form{width:269px; height:134px; margin:5px; padding:0; background:#faf0fa; background:url(bg.gif) no-repeat;}

fieldset{margin:0;padding:0 15px 10px 15px;border:0;}

legend{color:#3c527d;margin-left:40px;padding:10px 0 15px 0; font-size:20px;}

label{color:#333;clear:both;line-height:15px;margin-left:40px;float:left;}

input{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333;}

input.text{width:138px; margin:0 0 10px 3px; padding:0; border:0; border-bottom:1px solid #333; background:#c5d6f8;}

input#email{width:156px;}

input.submit{cursor:pointer;font-size:14px; border:0; float:right; background:#c5d6f8; font-weight:bold;}

Auch ein Formular mit einer Hintergrundgrafik ist denkbar. Hier verschmelzen die Eingabefelder mit dem Hintergrund, sodass nur noch der untere Rahmen sichtbar bleibt:

Erweitertes XHTML Markup

Wenn wir das Formular folgendermaßen verändern, enstehen weitere Gestaltungsmöglichkeiten:

<form action="/formular.php" method="get">
<fieldset>
<ul>
<li class="first">Bitte einloggen</li>
<li><label for="email">E-Mail:</label><input type="text" name="email" id="email" class="text" /></li>
<li><label for="passwort">E-Mail:</label><input type="password" name="passwort" id="passwort" class="text" /></li>
<li class="last"><input type="submit" value="Senden" class="submit" /></li>
</ul>
</fieldset>
</form>

Login-Formular Beispiel 4

form {width:210px; margin:5px; padding:0; background:#c5d6f8 url(form_bg.gif) repeat-x; border-bottom:1px solid #b3c3e3;}

fieldset{margin:0; padding:0; border:0;}

ul{margin:0; padding:0; list-style:none;}

ul li{border-top:1px solid #fff; border-bottom:1px solid #b3c3e3; padding:10px;}

ul li.first{border-top:0; font-size:20px; color:#404245;}

ul li.last{border-bottom:0;}

label{display:block; color:#404245; float:left; width:55px; line-height:23px; text-align:right; padding-right:5px; margin:0 0 0 5px;}

input{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#404245;}

input.text{width:107px; margin:0; padding:3px; border:0px solid #fff; border-top:1px solid #b3c3e3; border-left:1px solid #b3c3e3; height:15px;}

input.submit{width:90px; height:23px; cursor:pointer; border:0; background:url(button2.gif) no-repeat; color:#69c; font-weight:bold; margin-left:65px;}

Durch die zusätzlichen Rahmen der Listen-Elemente wird ein Relief-Effekt erzeugt, der auf dem Verlaufs-Hintergrund gut zur Geltung kommt. Die verwendete Hintergrundgrafik für den Button frischt diesen optisch auf:

Kontaktformular Beispiel

Letztes CSS kann auch auf ein Kontaktformular angewendet werden (»textarea« wurde hinzugefügt). Die Eingabefelder werden zusätzlich mit Icons versehen:

form {width:310px; margin:5px; padding:0; background:#c5d6f8 url(bg.gif) repeat-x; border-bottom:1px solid #b3c3e3;}

fieldset{margin:0; padding:0; border:0;}

ul{margin:0; padding:0; list-style:none;}

ul li{border-top:1px solid #fff; border-bottom:1px solid #b3c3e3; padding:10px;}

ul li.first{border-top:0; font-size:20px; color:#404245;}

ul li.last{border-bottom:0;}

label{display:block; color:#404245; float:left; width:55px; line-height:21px; text-align:right; padding-right:5px; margin:0 0 0 5px;}

input, .text{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#404245;}

.text{width:188px; padding:3px 3px 3px 22px; border:1px solid #fff; border-top:1px solid #b3c3e3; border-left:1px solid #b3c3e3; height:15px; background:#fff url(name_icon.gif) 2px 3px no-repeat;}

input#email{background:#fff url(email_icon.gif) 3px 3px no-repeat;}

textarea.text{height:100px;background:#fff url(nachricht_icon.gif) 3px 3px no-repeat;}

input.submit{width:90px; height:23px; cursor:pointer; border:0; background:url(button2.gif) no-repeat; color:#69c; font-weight:bold; margin-left:65px;}

Das Kontaktformular:

Alle Formulare als Demo

Hier sind alle Formulare noch einmal auf einer Seite.

Fehlermeldung gestalten

Wie bereits oben erläutert, soll der Nutzer auf die Fehlermeldung aufmerksam gemacht werden, um den Fehler schnellstmöglich beheben zu können. Über dem Formular wird folgende Liste platziert:

<ul class="fehler">
	<li>Bitte geben Sie Ihren Namen an.</li>
</ul>

Das entsprechende Eingabefeld, dass die fehlerhafte Eingabe enthält, bekommt die zweite Klasse »fehler« zugewiesen:

<input type="text" name="name" id="name" class="text fehler" />

Nun müssen die Elemente nur noch optisch angepasst werden:

form .fehler{border:1px solid #d65a5c;}

ul.fehler{margin:5px; padding:5px; border-top:1px solid #d65a5c; border-bottom:1px solid #d65a5c; background:#fdd; color:#c00;}

Wir erhalten folgendes Ergebnis:

Platzsparende JavaScript Lösung

Wenn der verfügbare Platz für ein Formular zu gering ist, um die Eingabefelder ausreichend mit Labels zu versehen, greifen viele Webmaster zu einer JavaScript Alternative. Die Labels werden von außerhalb einfach in das Eingabefeld verlegt (value=”Beschreibung”).

<input type="text" value="Beschreibung" />

Der Trick ist nun, den Text des vorbelegten Eingabefeldes wieder zu löschen, wenn der Nutzer in dieses Feld schreiben möchte. Die beiden JavaScript Event-Handler »onfocus« und »onblur« helfen dabei.

<input type="text" value="Beschreibung" onblur="if(this.value=='') this.value='Beschreibung';" onfocus="if(this.value=='Beschreibung') this.value='';" />

Demo: #inputinclude#

Ist JavaScript jedoch beim Nutzer deaktiviert, leidet die Usability. Denn der Nutzer muss nun eigenhändig die Vorbelegung löschen, um eine Eingabe machen zu können.

Anzeige der Schritte

Bei mehrschrittigen bzw. mehrseitigen Formularen empfiehlt es sich, dem Nutzer eine Übersicht der einzelnen Schritte zu zeigen, sodass dieser genau weiß, wo er sich befindet und welche Schritte noch kommen. Hierdurch kann die Usability deutlich gestärkt werden. Hier nun ein paar Beispiele, wie so eine Schrittfolge grafisch gestaltet werden kann:

paolina p (für Vorschau einen Artikel in den Warenkorb legen) »

World of Warcraft »

Moneybookers »

Nokia »

Weiterführende Links

Barrierefreie Formulare
Sign-Up Formulare Teil 1
Sign-Up Formulare Teil 2

Weitere Tutorial-Artikel

• AdBlocker erkennen und Fallback nutzen
• Wetter auf eigener Website mit Google Weather API
• RSS Feed auslesen mit PHP
• CSS Tagcloud (Schlagwortwolke)
• PHP und MySQL Tagcloud (Schlagwortwolke)
• CSS Pagination (Seitennummerierung)
• CSS Newsteaser
• CSS Navigation mit Liste
• CSS Bildwechsel

Sebastian Gollus

Ich bin seit 2007 selbständiger und freiberuflicher Web-Developer. Auch bin ich studierter Medien­wissen­schaftler mit Abschluss an der Uni Duisburg-Essen in „Angew. Kognitions- und Medien­wissen­schaften”. Neben Deutsch spreche ich auch Englisch und Niederländisch.
Kontakt zu mir gerne auch über Google+ und twitter.

Die neuesten Artikel