Improve conversion rates by building better payment forms.
The payment form is often the last step before completing a purchase. To maximize conversions, ensure your payment form is user-friendly and secure.
Ensure users know what to fill in #
Keep your payment form as simple as possible, showing only required fields.
Indicate the payment amount. The Submit button is ideal for that.
Use self-explanatory wordings for your
<label> elements. For example, use 'Security code', instead of an acronym like 'CVV' that's only used by some brands.
Help users enter their payment details #
To maximize conversions, ensure users can fill out your payment form as quickly as possible.
inputmode="numeric" for the card number and security code fields to show an optimized on-screen keyboard for entering numbers.
autocomplete values for your payment form controls to ensure browsers offer autofill. Use
autocomplete="cc-name" for the name,
autocomplete="cc-number" for the card number, and
autocomplete="cc-exp" for the expiry date.
Ensure users enter data in the correct format #
required attribute for every
<input> to ensure users fill out the complete form.
Payment card security codes can be three or four digits. Use
maxlength="4" to only allow three and four digits.
Ensure users only enter numbers for the card number and security code. Use
pattern="[0-9 ]+" to allow users to include spaces when entering a card number, since this is how the numbers are displayed on the physical cards.