Das Zahlungsformular ist häufig der letzte Schritt vor dem Abschluss eines Kaufs. Achten Sie darauf, dass Ihr Zahlungsformular nutzerfreundlich und sicher ist, um möglichst viele Conversions zu erzielen.
Stellen Sie sicher, dass die Nutzenden wissen, was sie ausfüllen müssen.
Halten Sie Ihr Zahlungsformular so einfach wie möglich und zeigen Sie nur Pflichtfelder auf.
Geben Sie den Zahlungsbetrag an. Die Schaltfläche Senden ist hierfür ideal.
<button>Pay $300.00</button>
Verwenden Sie für Ihre <label>-Elemente eine selbsterklärende Formulierung.
Verwenden Sie z. B. „Sicherheitscode“ anstelle eines Akronyms wie „CVV“, das nur von einigen Marken verwendet wird.
Nutzern bei der Eingabe ihrer Zahlungsdetails helfen
Um möglichst viele Conversions zu 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, damit auf dem Bildschirm eine optimierte Bildschirmtastatur für die Eingabe von Zahlen angezeigt wird.
Fügen Sie entsprechende autocomplete-Werte für die Einstellungen Ihres Zahlungsformulars hinzu, damit die Browser die Funktion zum automatischen Ausfüllen unterstützen.
Verwende autocomplete="cc-name" als Namen, autocomplete="cc-number" als Kartennummer und autocomplete="cc-exp" für das Ablaufdatum.
Sicherstellen, dass Nutzer Daten im richtigen Format eingeben
Verwenden Sie das Attribut required für jede <input>, damit Nutzer das Formular ausfüllen.
Sicherheitscodes für Zahlungskarten können drei- oder vierstellig sein.
Verwenden Sie minlength="3" und maxlength="4", sodass nur drei und vier Ziffern zulässig sind.
Nutzer dürfen als Kartennummer und Sicherheitscode nur Zahlen eingeben.
Verwende pattern="[0-9 ]+", damit Nutzer bei der Eingabe einer Kartennummer Leerzeichen einfügen können, da die Zahlen auf physischen Karten so angezeigt werden.