Zahlungsformulare sind der wichtigste Teil des Bezahlvorgangs. Ein schlecht gestaltetes Zahlungsformular ist ein häufiger Grund für den Abbruch des Bezahlvorgangs.
Erstellen Sie ein Formular, mit dem Nutzer Zahlungsdetails auf Computern und Mobilgeräten so einfach wie möglich eingeben können. Achten Sie darauf, dass das Formular die integrierten Browserfunktionen für Autofill, Validierung und Einschränkungen bei der Dateneingabe optimal nutzt.
Implementierung
Im Folgenden finden Sie die wichtigsten Richtlinien für die Erstellung erfolgreicher Zahlungsformulare.
Aussagekräftigen, gültigen HTML-Code verwenden
Nutzen Sie die Elemente und Attribute, die für die Erstellung von Formularen vorgesehen sind:
<form>,<input>,<label>und<button>type,autocompleteundinputmode
Diese ermöglichen integrierte Browserfunktionen, verbessern die Barrierefreiheit und verleihen dem Markup Bedeutung.
Verwenden Sie das <label>-Element, um Formularfelder für die Dateneingabe zu kennzeichnen.
Verwenden Sie zum Labeln von <input>, <select> oder <textarea> ein <label>. Verknüpfen Sie ein Label mit einer Eingabe, indem Sie dem for-Attribut des Labels denselben Wert wie dem id-Attribut der Eingabe zuweisen.
HTML-Attribute optimal nutzen
Erleichtern Sie Nutzern die Dateneingabe, indem Sie das entsprechende <type>-Attribut des <input>-Elements verwenden, um auf Mobilgeräten die richtige Tastatur bereitzustellen und eine grundlegende integrierte Validierung durch den Browser zu ermöglichen.
Verwenden Sie für E-Mail-Adressen immer type="email" und für Telefonnummern immer type="tel".
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Jedes <input>-, <select>- und <textarea>-Element SOLLTE ein entsprechendes autocomplete-Attribut haben, um die Barrierefreiheit zu verbessern und Nutzern die erneute Eingabe von Daten zu ersparen.
Hilfreiche Schaltflächen
Verwenden Sie <button> für Schaltflächen. Du kannst auch <input type="submit"> verwenden, aber kein div oder ein anderes zufälliges Element, das als Schaltfläche fungiert. Schaltflächenelemente bieten barrierefreies Verhalten, integrierte Funktionen zum Senden von Formularen und können einfach gestaltet werden.
Geben Sie jeder Schaltfläche zum Senden eines Formulars einen Wert, der beschreibt, was sie tut. Verwenden Sie für jeden Schritt des Bezahlvorgangs einen aussagekräftigen Call-to-Action, der den Fortschritt zeigt und den nächsten Schritt deutlich macht. Bezeichnen Sie die Schaltfläche zum Senden im Formular für die Lieferadresse beispielsweise mit Weiter zur Zahlung statt mit Weiter oder Speichern.
Verwenden Sie nach Möglichkeit ein einzelnes Eingabefeld für den Namen.
Ermöglichen Sie Ihren Nutzern, ihren Namen in einem einzigen Eingabefeld einzugeben, es sei denn, Sie haben einen guten Grund, Vornamen, Nachnamen, Anreden oder andere Namensteile separat zu speichern. Durch die Verwendung eines einzigen Namenseingabefelds werden Formulare weniger komplex, das Ausschneiden und Einfügen wird ermöglicht und Autofill wird vereinfacht.
Internationale Namen zulassen. Verwenden Sie zur Validierung keine regulären Ausdrücke, die nur mit lateinischen Zeichen übereinstimmen. Bei der Option „Nur lateinische Zeichen“ werden Nutzer mit Namen oder Adressen ausgeschlossen, die Zeichen enthalten, die nicht im lateinischen Alphabet enthalten sind. Erlauben Sie stattdessen den Abgleich von Unicode-Buchstaben und sorgen Sie dafür, dass Ihr Backend Unicode sowohl als Eingabe als auch als Ausgabe sicher unterstützt. Unicode in regulären Ausdrücken wird von modernen Browsern gut unterstützt.
Verschiedene Adressformate zulassen
Wenn Sie Formularfelder für eine Adresse in einem Zahlungsformular hinzufügen, sollten Sie die Vielfalt der Adressformate berücksichtigen, die es sogar innerhalb eines einzelnen Landes geben kann. Stellen Sie keine Vermutungen über „normale“ Adressen an.
Wenn es Ihre Datenanforderungen zulassen, sollten Sie ein einzelnes <textarea>-Element für die Adresse verwenden. Dies ist die flexibelste Option für eine Vielzahl von lokalen und internationalen Adressformaten.
Automatische Vervollständigung für die Rechnungsadresse verwenden
Standardmäßig ist die Rechnungsadresse mit der Lieferadresse identisch. Sorgen Sie für eine übersichtliche Darstellung, indem Sie einen Link zum Bearbeiten der Rechnungsadresse bereitstellen (oder Zusammenfassungs- und Detailelemente verwenden), anstatt die Rechnungsadresse in einem Formular anzuzeigen.
Verwenden Sie für die Rechnungsadresse geeignete Werte für die automatische Vervollständigung, genau wie für die Versandadresse, damit der Nutzer die Daten nicht mehrmals eingeben muss. Fügen Sie Attributen für die automatische Vervollständigung ein Präfixwort hinzu, wenn Sie unterschiedliche Werte für Eingaben mit demselben Namen in verschiedenen Abschnitten haben. Beispiel:
<!-- Prefix with shipping or billing; note that the valid token is address-line1 (no hyphen before the digit) -->
<input autocomplete="shipping address-line1" ...>
...
<input autocomplete="billing address-line1" ...>
Fortschritt des Bezahlvorgangs anzeigen
Verwenden Sie für jeden Schritt bis zur Zahlung Seitenüberschriften und aussagekräftige Schaltflächenwerte, die deutlich machen, was jetzt zu tun ist und welcher Schritt als Nächstes folgt.
Verwenden Sie das Attribut enterkeyhint für Formulareingaben, um das Label für die Eingabetaste auf der mobilen Tastatur festzulegen. Verwenden Sie beispielsweise enterkeyhint="previous" und enterkeyhint="next" in einem mehrseitigen Formular, enterkeyhint="done" für die letzte Eingabe im Formular und enterkeyhint="search" für eine Sucheingabe.
Nutzer müssen Zahlungsdaten nicht noch einmal eingeben
Achten Sie darauf, in Zahlungskartenformularen die entsprechenden autocomplete-Werte hinzuzufügen. Ohne die automatische Vervollständigung könnten Nutzer Zahlungskartendetails physisch aufzeichnen oder unsicher speichern.
<!-- cc-number tells autofill this is a card number, not a generic number field -->
<!-- inputmode="numeric" gives a numeric keyboard without the increment/decrement spinner -->
<!-- DO NOT use type="number" — it adds increment/decrement controls and strips leading zeros -->
<input id="cc-number" name="cc-number" type="text" autocomplete="cc-number"
inputmode="numeric" maxlength="19" pattern="[\d ]{13,19}" required>
<!-- cc-name autofills with the name exactly as it appears on the card; Unicode pattern allows international names -->
<input id="cc-name" name="cc-name" type="text" autocomplete="cc-name"
maxlength="50" pattern="[\p{L} \-\.]+" required>
<!-- cc-exp autofills the full expiry date as MM/YY -->
<!-- MANDATORY: Place format hints above the input so autocomplete popovers or virtual keyboards do not obscure them during editing -->
<span id="exp-hint" class="hint">Format: MM/YY</span>
<input id="cc-exp" name="cc-exp" type="text" autocomplete="cc-exp"
aria-describedby="exp-hint" maxlength="5" required>
<!-- cc-csc autofills the security code; DO NOT use type="password" here -->
<input id="cc-csc" name="cc-csc" type="text" autocomplete="cc-csc"
inputmode="numeric" maxlength="4" pattern="[0-9]{3,4}" required>
Formathinweise über der Eingabe anzeigen
Wenn ein Feld ein erforderliches Format hat (z. B. das Ablaufdatum der MM/YY), fügen Sie den Hinweis in ein sichtbares Element über der Eingabe ein und verknüpfen Sie die beiden mit aria-describedby, wie im Beispiel für cc-exp oben. Hinweise, die sich unter einem Eingabefeld befinden, werden leicht durch die mobile Tastatur oder das Autofill-Popover ausgeblendet, wenn der Nutzer sie benötigt.
Verlassen Sie sich nicht auf das Attribut placeholder als einzigen Formathinweis und verwenden Sie es niemals anstelle eines <label>: Platzhaltertext wird ausgeblendet, sobald der Nutzer mit der Eingabe beginnt, sodass er während der Bearbeitung nicht überprüft werden kann. Ein Platzhalter ist als zusätzlicher Hinweis neben dem Label und dem dauerhaften Hinweis in Ordnung.
Sicherheitscode nicht maskieren
Verwenden Sie type="text" mit inputmode="numeric" für den Sicherheitscode der Karte, nicht type="password". Nutzer können einen maskierten drei- oder vierstelligen Code nicht auf Tippfehler überprüfen. Ein Tippfehler wird also erst erkannt, wenn die Zahlung abgelehnt wird. Außerdem bietet die Maskierung nur wenig Schutz, da der Code auf der Karte aufgedruckt ist, die der Nutzer in der Hand hält.
Einzelne Eingabe für Zahlungskarten- und Telefonnummern verwenden
Verwenden Sie für Zahlungskarten- und Telefonnummern eine einzige Eingabe: Teilen Sie die Nummer nicht in Teile auf. Das erleichtert Nutzern die Dateneingabe, vereinfacht die Validierung und ermöglicht das automatische Ausfüllen durch Browser. Das Gleiche gilt für andere numerische Daten wie PINs und Bankcodes.
Sorgfältig validieren
Sie sollten die Dateneingabe sowohl in Echtzeit als auch vor dem Senden des Formulars validieren. Eine Möglichkeit besteht darin, einer Zahlungskarteneingabe ein Musterattribut hinzuzufügen. Wenn der Nutzer versucht, das Zahlungsformular mit einem ungültigen Wert zu senden, zeigt der Browser eine Warnmeldung an und setzt den Fokus auf die Eingabe.
Der reguläre Ausdruck für das Muster muss jedoch flexibel genug sein, um die verschiedenen Längen von Zahlungskartennummern zu berücksichtigen: von 14 Ziffern (oder möglicherweise weniger) bis 20 (oder mehr). Kartenprüfnummern (auch als CSC, CVC, CVV oder unter anderen Namen bekannt) bestehen aus 3 oder 4 Ziffern.
Erlauben Sie Nutzern, Leerzeichen einzugeben, wenn sie eine neue Zahlungskartennummer eingeben, da die Nummern auf physischen Karten so angezeigt werden. Das ist nutzerfreundlicher (Sie müssen ihnen nicht sagen, dass sie etwas falsch gemacht haben), unterbricht den Conversion-Fluss weniger wahrscheinlich und es ist einfach, Leerzeichen in Zahlen vor der Verarbeitung zu entfernen.
Nutzer davor bewahren, versehentlich Datenfelder zu übersehen
Fügen Sie Pflichtfeldern das Attribut required hinzu. Moderne Browser fordern Nutzer automatisch auf, fehlende Daten einzugeben, und setzen den Fokus auf die entsprechenden Felder.
Fallback-Strategien
Autofill ist eine progressive Verbesserung. In Browsern, die Autofill nicht unterstützen, müssen Nutzer ihre Zahlungsdetails manuell eingeben. Die semantischen HTML-Einschränkungen (z. B. type, inputmode, pattern und required) funktionieren weiterhin ordnungsgemäß, um Nutzereingaben zu validieren und die richtigen Bildschirmtastaturen bereitzustellen.