Betaalformulieren zijn het belangrijkste onderdeel van het betaalproces. Een slecht ontworpen betalingsformulier is een veelvoorkomende oorzaak van verlaten winkelwagens.
Maak een formulier waarmee gebruikers zo makkelijk mogelijk betalingsgegevens kunnen invoeren op desktops en mobiele apparaten. Zorg dat het formulier optimaal gebruikmaakt van ingebouwde browserfuncties voor automatisch invullen, validatie en beperkingen voor gegevensinvoer.
Hoe wordt dit geïmplementeerd
Hieronder staan de belangrijkste richtlijnen voor het maken van succesvolle betalingsformulieren.
Gebruik betekenisvolle, geldige HTML
Maak optimaal gebruik van de elementen en kenmerken die zijn ontworpen om formulieren te maken:
<form>,<input>,<label>en<button>type,autocompleteeninputmode
Deze maken ingebouwde browserfunctionaliteit mogelijk, verbeteren de toegankelijkheid en voegen betekenis toe aan de opmaak.
Gebruik het element <label> om formuliervelden te labelen voor gegevensinvoer
Gebruik een <label> om een <input>, <select> of <textarea> te labelen. Koppel een label aan een invoer door het kenmerk for van het label dezelfde waarde te geven als de id van de invoer.
HTML-kenmerken optimaal gebruiken
Maak het gebruikers makkelijk om gegevens in te voeren door het juiste kenmerk <type> van het element <input> te gebruiken om het juiste toetsenbord op mobiele apparaten te bieden en eenvoudige ingebouwde validatie door de browser mogelijk te maken.
Gebruik altijd type="email" voor e-mailadressen en type="tel" voor telefoonnummers.
<!-- 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">
Elk <input>-, <select>- en <textarea>-element MOET een geschikt autocomplete-kenmerk hebben om de toegankelijkheid te verbeteren en te voorkomen dat gebruikers gegevens opnieuw moeten invoeren.
Knoppen nuttig maken
Gebruik <button> voor knoppen. Je kunt ook <input type="submit"> gebruiken, maar gebruik geen div of een ander willekeurig element dat als knop fungeert. Knopelementen bieden toegankelijk gedrag, ingebouwde functionaliteit voor het indienen van formulieren en kunnen makkelijk worden opgemaakt.
Geef elke verzendknop van een formulier een waarde die aangeeft wat de knop doet. Gebruik voor elke stap naar de betaling een beschrijvende call-to-action die de voortgang toont en de volgende stap duidelijk maakt. Label de verzendknop op uw formulier voor het bezorgadres bijvoorbeeld met Doorgaan naar betaling in plaats van Doorgaan of Opslaan.
Gebruik waar mogelijk één invoerveld voor de naam
Sta je gebruikers toe hun naam in te voeren via één invoerveld, tenzij je een goede reden hebt om voornamen, achternamen, titels of andere naamdelen afzonderlijk op te slaan. Als je één invoerveld voor de naam gebruikt, zijn formulieren minder complex, kun je knippen en plakken en is automatisch invullen makkelijker.
Internationale namen toestaan. Gebruik voor validatie geen reguliere expressies die alleen overeenkomen met Latijnse tekens. Alleen Latijns sluit gebruikers uit met namen of adressen die tekens bevatten die niet in het Latijnse alfabet voorkomen. Sta in plaats daarvan Unicode-letterovereenkomsten toe en zorg dat je backend Unicode beveiligd ondersteunt als zowel invoer als uitvoer. Unicode in reguliere expressies wordt goed ondersteund door moderne browsers.
Sta verschillende adresindelingen toe
Als je formuliervelden voor een adres toevoegt aan een betalingsformulier, moet je rekening houden met de verschillende adresnotaties, zelfs binnen één land. Doe geen aannames over 'normale' adressen.
Als dit mogelijk is binnen uw gegevensvereisten, kunt u overwegen één <textarea>-element te gebruiken voor het adres. Dit is de meest flexibele optie voor verschillende lokale en internationale adresnotaties.
Automatisch aanvullen gebruiken voor het factuuradres
Stel het factuuradres standaard in op hetzelfde adres als het bezorgadres. Verminder visuele rommel door een link te bieden om het factuuradres te bewerken (of gebruik samenvattings- en detailselementen) in plaats van het factuuradres in een formulier te tonen.
Gebruik de juiste waarden voor automatisch aanvullen voor het factuuradres, net zoals u dat doet voor het verzendadres, zodat de gebruiker de gegevens niet meer dan één keer hoeft in te voeren. Voeg een voorvoegsel toe aan kenmerken voor automatisch aanvullen als je verschillende waarden hebt voor invoer met dezelfde naam in verschillende secties. Voorbeeld:
<!-- 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" ...>
Voortgang van betaling tonen
Gebruik voor elke stap naar de betaling paginakoppen en beschrijvende knopwaarden die duidelijk maken wat er nu moet worden gedaan en wat de volgende stap is.
Gebruik het kenmerk enterkeyhint voor formulierinvoer om het label van de Enter-toets op het mobiele toetsenbord in te stellen. Gebruik bijvoorbeeld enterkeyhint="previous" en enterkeyhint="next" in een formulier met meerdere pagina's, enterkeyhint="done" voor de laatste invoer in het formulier en enterkeyhint="search" voor een zoekinvoer.
Zorgen dat gebruikers hun betalingsgegevens niet opnieuw hoeven in te voeren
Zorg dat u de juiste autocomplete-waarden toevoegt aan betaalkaartformulieren. Zonder automatisch aanvullen kunnen gebruikers een fysiek overzicht van betaalkaartgegevens bijhouden of deze onveilig opslaan.
<!-- 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>
Opmaaktips boven de invoer tonen
Als een veld een vereiste indeling heeft (bijvoorbeeld de vervaldatum van MM/YY), plaats je de hint in een zichtbaar element boven de invoer en koppel je de 2 met aria-describedby, zoals in het voorbeeld van cc-exp hierboven. Hints die onder een invoerveld staan, worden makkelijk verborgen door het mobiele toetsenbord of de pop-over voor automatisch invullen op het moment dat de gebruiker ze nodig heeft.
Vertrouw niet op het kenmerk placeholder als enige opmaaktip en gebruik het nooit in plaats van een <label>: tijdelijke aanduidingstekst wordt verborgen zodra de gebruiker begint te typen, dus kan niet worden gecontroleerd tijdens het bewerken. Een tijdelijke aanduiding is prima als extra aanwijzing naast het label en de permanente hint.
De beveiligingscode niet maskeren
Gebruik type="text" met inputmode="numeric" voor de beveiligingscode van de kaart, niet type="password". Gebruikers kunnen een gemaskeerde code van 3 of 4 cijfers niet controleren op typfouten. Een verkeerd getypt cijfer wordt dus pas opgemerkt als de betaling wordt geweigerd. Maskeren biedt weinig bescherming, omdat de code op de kaart staat die de gebruiker in handen heeft.
Eén invoerveld gebruiken voor betaalkaart- en telefoonnummers
Gebruik voor betaalkaart- en telefoonnummers één invoerveld: splits het nummer niet op in delen. Zo kunnen gebruikers makkelijker gegevens invoeren, is validatie eenvoudiger en kunnen browsers automatisch invullen. Overweeg hetzelfde te doen voor andere numerieke gegevens, zoals pincodes en bankcodes.
Valideer zorgvuldig
Valideer de gegevensinvoer zowel in realtime als voordat het formulier wordt ingediend. U kunt dit doen door een patroonkenmerk toe te voegen aan een invoerveld voor een betaalkaart. Als de gebruiker het betalingsformulier probeert in te dienen met een ongeldige waarde, toont de browser een waarschuwingsbericht en wordt de focus op de invoer geplaatst.
De reguliere expressie van uw patroon moet wel flexibel genoeg zijn om de verschillende lengtes van betaalkaartnummers te verwerken: van 14 cijfers (of mogelijk minder) tot 20 (of meer). Beveiligingscodes van kaarten (ook wel CSC, CVC, CVV of andere namen genoemd) bestaan uit 3 of 4 cijfers.
Sta gebruikers toe spaties te gebruiken als ze een nieuw betaalkaartnummer invoeren, omdat nummers zo worden weergegeven op fysieke kaarten. Dat is vriendelijker voor de gebruiker (u hoeft niet te zeggen dat die iets verkeerd heeft gedaan), onderbreekt het conversieproces minder snel en het is makkelijk om spaties in nummers te verwijderen voordat u ze verwerkt.
Voorkomen dat gebruikers per ongeluk gegevensvelden missen
Voeg het kenmerk required toe aan verplichte velden. Moderne browsers vragen automatisch om ontbrekende gegevens en stellen de focus daarop in.
Reservestrategieën
Automatisch invullen is een progressive enhancement. In browsers die automatisch invullen niet ondersteunen, moeten gebruikers hun betalingsgegevens handmatig invoeren. De semantische HTML-beperkingen (zoals type, inputmode, pattern en required) werken nog steeds goed om gebruikersinvoer te valideren en de juiste virtuele toetsenborden te bieden.