Das Zahlungsformular ist oft der letzte Schritt vor dem Abschluss eines Kaufs. Wenn Sie möglichst viele Conversions erzielen möchten, verwenden Sie ein nutzerfreundliches und sicheres Zahlungsformular.
Sicherstellen, dass Nutzer wissen, was sie ausfüllen müssen
Halten Sie Ihr Zahlungsformular so einfach wie möglich, Es werden nur Pflichtfelder angezeigt.
Geben Sie den Zahlungsbetrag an. Die Schaltfläche Senden ist dafür ideal.
<button>Pay $300.00</button>
Verwenden Sie für die <label>-Elemente selbsterklärende Formulierungen.
Beispiel: „Sicherheitscode“,
anstelle eines Akronyms wie „CVV“ das nur von einigen Marken genutzt wird.
Nutzern bei der Eingabe ihrer Zahlungsdetails helfen
Damit Sie möglichst viele Conversions erzielen, sollten Sie dafür sorgen, dass Nutzer Ihr Zahlungsformular so schnell wie möglich ausfüllen können.
Verwende inputmode="numeric" für die Felder für die Kartennummer und den Sicherheitscode
, um eine optimierte Bildschirmtastatur für die Zahleneingabe anzuzeigen.
Fügen Sie den Steuerelementen Ihres Zahlungsformulars entsprechende autocomplete-Werte hinzu, damit die Browser die Funktion „Autofill“ anbieten können.
Verwenden Sie autocomplete="cc-name" als Namen,
autocomplete="cc-number" für die Kartennummer und autocomplete="cc-exp" für das Ablaufdatum.
Sicherstellen, dass Nutzer Daten im richtigen Format eingeben
Verwenden Sie das Attribut required pro <input>, damit Nutzer das Formular vollständig ausfüllen.
Sicherheitscodes für Zahlungskarten können drei- oder vierstellig sein.
Verwenden Sie minlength="3" und maxlength="4", um nur drei bis vier Ziffern zuzulassen.
Achten Sie darauf, dass Nutzer nur Zahlen für die Kartennummer und den Sicherheitscode eingeben.
Verwenden Sie pattern="[0-9 ]+", damit Nutzer bei der Eingabe einer Kartennummer Leerzeichen einfügen können,
da die Zahlen so auf den physischen Karten angezeigt werden.