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.