แบบฟอร์มการชำระเงินมักเป็นขั้นตอนสุดท้ายก่อนทำการซื้อ หากต้องการเพิ่มจำนวน 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 ]+" เพื่ออนุญาตให้ผู้ใช้เว้นวรรคเมื่อป้อนหมายเลขบัตร
เนื่องจากเป็นการแสดงหมายเลขบนบัตรจริง