Il modulo di pagamento è spesso l'ultimo passaggio prima di completare un acquisto. Per massimizzare le conversioni, assicurati che la tua forma di pagamento sia sicura e facile da usare.
Assicurati che gli utenti sappiano cosa inserire
Usa la forma di pagamento più semplice possibile e mostra solo i campi obbligatori.
Indica l'importo del pagamento. A questo scopo, è consigliabile utilizzare il pulsante Invia.
<button>Pay $300.00</button>
Usa frasi esplicative per i tuoi elementi <label>
.
Ad esempio, usa "Codice di sicurezza"
invece di un acronimo come "CVV", usato solo da alcuni brand.
Aiutare gli utenti a inserire i dati di pagamento
Per massimizzare le conversioni, assicurati che gli utenti possano compilare il tuo modulo di pagamento il più rapidamente possibile.
Usa inputmode="numeric"
per i campi relativi al numero della carta e al codice di sicurezza
per mostrare una tastiera sullo schermo ottimizzata per l'inserimento di numeri.
Aggiungi valori autocomplete
appropriati per i controlli dei moduli di pagamento affinché i browser offrano la compilazione automatica.
Utilizza autocomplete="cc-name"
per il nome, autocomplete="cc-number"
per il numero della carta e autocomplete="cc-exp"
per la data di scadenza.
Assicurati che gli utenti inseriscono i dati nel formato corretto
Utilizza l'attributo required
per ogni <input>
per assicurarti che gli utenti compilino il modulo completo.
I codici di sicurezza delle carte di pagamento possono essere di tre o quattro cifre.
Usa minlength="3"
e maxlength="4"
per consentire solo tre e quattro cifre.
Assicurati che gli utenti inseriscano solo i numeri della carta e del codice di sicurezza.
Usa pattern="[0-9 ]+"
per consentire agli utenti di includere spazi quando inseriscono il numero di una carta, poiché è così che i numeri vengono visualizzati sulle carte fisiche.