付款表单通常是完成购买流程的最后一步。 为了尽可能提高转化次数,请确保您的付款方式方便用户使用且安全。
确保用户知道填写什么
付款表单应尽可能简单,只显示必填字段。
指明付款金额。 提交按钮非常适合此操作。
<button>Pay $300.00</button>
对 <label>
元素使用一目了然的措辞。
例如,使用“验证码”,而不是只有某些品牌使用的“CVV”等首字母缩写词。
帮助用户输入付款信息
为了尽可能提高转化次数,请确保用户可以尽快填写您的付款表单。
针对卡号和安全码字段使用 inputmode="numeric"
,可显示经过优化的屏幕键盘(用于输入数字)。
为您的付款表单控件添加适当的 autocomplete
值,以确保浏览器提供自动填充功能。
使用 autocomplete="cc-name"
作为姓名,使用 autocomplete="cc-number"
作为卡号,使用 autocomplete="cc-exp"
作为到期日期。
确保用户以正确的格式输入数据
对每个 <input>
使用 required
属性,以确保用户填写完整的表单。
支付卡安全码可以是三位或四位数字。
使用 minlength="3"
和 maxlength="4"
仅允许 3 位和 4 位数字。
确保用户仅输入卡号和安全码的数字。
使用 pattern="[0-9 ]+"
允许用户在输入卡号时添加空格,因为数字卡在实体卡上的显示方式。