แบบฟอร์มการชำระเงินมักเป็นขั้นตอนสุดท้ายก่อนทำการซื้อ หากต้องการเพิ่มจำนวน Conversion สูงสุด ให้ตรวจสอบว่ารูปแบบการชำระเงินของคุณใช้งานง่ายและปลอดภัย
ทำให้ผู้ใช้ทราบว่าต้องกรอกข้อมูลอะไรบ้าง
ทำให้แบบฟอร์มการชำระเงินเรียบง่ายที่สุด โดยแสดงเฉพาะช่องที่ต้องกรอก
ระบุจำนวนเงินที่ชำระ ซึ่งปุ่มส่งจะเป็นปุ่มที่เหมาะสม
<button>Pay $300.00</button>
ใช้คำที่อธิบายตนเองสำหรับองค์ประกอบ <label>
ตัวอย่างเช่น ใช้ "รหัสความปลอดภัย" แทนตัวย่ออย่าง "CVV" ที่มีการใช้ในบางแบรนด์เท่านั้น
ช่วยให้ผู้ใช้ป้อนรายละเอียดการชําระเงิน
หากต้องการเพิ่มจำนวน Conversion สูงสุด โปรดตรวจสอบว่าผู้ใช้จะกรอกแบบฟอร์มการชำระเงินโดยเร็วที่สุดเท่าที่จะเป็นไปได้
ใช้ inputmode="numeric"
สำหรับช่องหมายเลขบัตรและรหัสความปลอดภัย
เพื่อแสดงแป้นพิมพ์บนหน้าจอที่เพิ่มประสิทธิภาพสำหรับการป้อนหมายเลข
เพิ่มค่า autocomplete
ที่เหมาะสมสำหรับการควบคุมแบบฟอร์มการชำระเงินเพื่อให้เบราว์เซอร์มีการป้อนข้อความอัตโนมัติ
ใช้ autocomplete="cc-name"
สำหรับชื่อ
autocomplete="cc-number"
สำหรับหมายเลขบัตร และใช้ autocomplete="cc-exp"
สำหรับวันหมดอายุ
ตรวจสอบว่าผู้ใช้ป้อนข้อมูลในรูปแบบที่ถูกต้อง
ใช้แอตทริบิวต์ required
สำหรับ <input>
ทุกรายการเพื่อให้ผู้ใช้กรอกแบบฟอร์มให้ครบถ้วน
รหัสความปลอดภัยของบัตรสำหรับชำระเงินอาจมี 3 หรือ 4 หลัก
ใช้ minlength="3"
และ maxlength="4"
เพื่ออนุญาตเฉพาะตัวเลข 3-4 หลัก
ตรวจสอบว่าผู้ใช้ป้อนเฉพาะตัวเลขของหมายเลขบัตรและรหัสความปลอดภัย
ใช้ pattern="[0-9 ]+"
เพื่ออนุญาตให้ผู้ใช้เว้นวรรคเมื่อป้อนหมายเลขบัตร
เนื่องจากเป็นการแสดงหมายเลขบนบัตรจริง