แบบฟอร์มการชำระเงินเป็นส่วนที่สำคัญที่สุดในขั้นตอนการชำระเงิน การออกแบบแบบฟอร์มการชำระเงินที่ไม่ดีเป็นสาเหตุที่พบบ่อยของการละทิ้งรถเข็นช็อปปิ้งกลางคัน
สร้างแบบฟอร์มที่ช่วยให้ผู้ใช้ป้อนรายละเอียดการชำระเงินบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ได้ง่ายที่สุด ตรวจสอบว่าแบบฟอร์มใช้ประโยชน์จากฟีเจอร์ในตัวของเบราว์เซอร์สำหรับการป้อนข้อความอัตโนมัติ การตรวจสอบความถูกต้อง และข้อจำกัดในการป้อนข้อมูลอย่างเต็มที่
วิธีการนำไปใช้งาน
ด้านล่างนี้คือหลักเกณฑ์ที่สำคัญที่สุดในการสร้างแบบฟอร์มการชำระเงินที่ประสบความสำเร็จ
ใช้ HTML ที่ถูกต้องและมีความหมาย
ใช้ประโยชน์สูงสุดจากองค์ประกอบและแอตทริบิวต์ที่สร้างขึ้นเพื่อสร้างแบบฟอร์ม ดังนี้
<form>,<input>,<label>และ<button>type,autocompleteและinputmode
ซึ่งจะช่วยเปิดใช้ฟังก์ชันการทำงานของเบราว์เซอร์ในตัว ปรับปรุงการช่วยเหลือพิเศษ และเพิ่มความหมายให้กับมาร์กอัป
ใช้องค์ประกอบ <label> เพื่อติดป้ายกำกับช่องแบบฟอร์มสำหรับการป้อนข้อมูล
หากต้องการติดป้ายกำกับ <input>, <select> หรือ <textarea> ให้ใช้ <label> เชื่อมโยงป้ายกำกับกับอินพุตโดยกำหนดให้แอตทริบิวต์ for ของป้ายกำกับมีค่าเดียวกับ id ของอินพุต
ใช้ประโยชน์จากแอตทริบิวต์ HTML ให้มากที่สุด
ช่วยให้ผู้ใช้ป้อนข้อมูลได้ง่ายๆ โดยใช้แอตทริบิวต์ <input> element <type> ที่เหมาะสมเพื่อแสดงแป้นพิมพ์ที่ถูกต้องบนอุปกรณ์เคลื่อนที่ และเปิดใช้การตรวจสอบความถูกต้องในตัวขั้นพื้นฐานโดยเบราว์เซอร์
ใช้ type="email" สำหรับอีเมลและ type="tel" สำหรับหมายเลขโทรศัพท์เสมอ
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
องค์ประกอบ <input>, <select> และ <textarea> ทุกรายการควรมีแอตทริบิวต์ autocomplete ที่เหมาะสม เพื่อปรับปรุงการช่วยเหลือพิเศษและช่วยให้ผู้ใช้ไม่ต้องป้อนข้อมูลซ้ำ
ทำให้ปุ่มมีประโยชน์
ใช้ <button> สำหรับปุ่ม คุณยังใช้ <input type="submit"> ได้ด้วย แต่ไม่ควรใช้ div หรือองค์ประกอบอื่นๆ ที่สุ่มเลือกมาเพื่อทำหน้าที่เป็นปุ่ม องค์ประกอบปุ่มช่วยให้เข้าถึงได้ง่าย มีฟังก์ชันการส่งแบบฟอร์มในตัว และจัดรูปแบบได้ง่าย
กำหนดค่าให้กับปุ่มส่งแบบฟอร์มแต่ละปุ่มเพื่อระบุว่าปุ่มนั้นทำอะไร สำหรับแต่ละขั้นตอนที่นำไปสู่การชำระเงิน ให้ใช้คำกระตุ้นการตัดสินใจที่สื่อความหมายซึ่งแสดงความคืบหน้าและทำให้ขั้นตอนถัดไปชัดเจน เช่น ติดป้ายกำกับปุ่มส่งในแบบฟอร์มที่อยู่สำหรับจัดส่งว่าดำเนินการชำระเงินแทนที่จะเป็นดำเนินการต่อหรือบันทึก
ใช้อินพุตชื่อเดียวเมื่อเป็นไปได้
อนุญาตให้ผู้ใช้ป้อนชื่อโดยใช้อินพุตเดียว เว้นแต่คุณจะมีเหตุผลที่ดีในการจัดเก็บชื่อ นามสกุล คำนำหน้าชื่อ หรือส่วนอื่นๆ ของชื่อแยกกัน การใช้ช่องป้อนชื่อช่องเดียวจะช่วยให้แบบฟอร์มมีความซับซ้อนน้อยลง ช่วยให้ตัดและวางได้ และทำให้การป้อนข้อความอัตโนมัติง่ายขึ้น
อนุญาตให้ใช้ชื่อสากล สำหรับการตรวจสอบความถูกต้อง ให้หลีกเลี่ยงการใช้นิพจน์ทั่วไปที่ตรงกับอักขระละตินเท่านั้น ตัวเลือก "ละตินเท่านั้น" จะยกเว้นผู้ใช้ที่มีชื่อหรืออีเมลซึ่งมีอักขระที่ไม่ได้อยู่ในตัวอักษรละติน อนุญาตให้จับคู่ตัวอักษร Unicode แทน และตรวจสอบว่าแบ็กเอนด์รองรับ Unicode อย่างปลอดภัยทั้งในรูปแบบอินพุตและเอาต์พุต เบราว์เซอร์ที่ทันสมัยรองรับ Unicode ในนิพจน์ทั่วไปเป็นอย่างดี
อนุญาตให้ใช้รูปแบบที่อยู่ที่หลากหลาย
เมื่อเพิ่มช่องแบบฟอร์มสำหรับที่อยู่ในแบบฟอร์มการชำระเงิน โปรดคำนึงถึงความหลากหลายของรูปแบบที่อยู่ แม้จะอยู่ภายในประเทศเดียวกันก็ตาม อย่าตั้งสมมติฐานเกี่ยวกับที่อยู่ "ปกติ"
หากเป็นไปได้ภายในข้อกำหนดด้านข้อมูล ให้พิจารณาใช้องค์ประกอบ <textarea> รายการเดียวสำหรับที่อยู่ ตัวเลือกนี้เป็นตัวเลือกที่ยืดหยุ่นที่สุดสำหรับรูปแบบที่อยู่ในประเทศและต่างประเทศที่หลากหลาย
ใช้การเติมข้อความอัตโนมัติสำหรับที่อยู่สำหรับการเรียกเก็บเงิน
โดยค่าเริ่มต้น ให้ตั้งค่าที่อยู่สำหรับการเรียกเก็บเงินให้เหมือนกับที่อยู่สำหรับจัดส่ง ลดความยุ่งเหยิงของภาพโดยระบุลิงก์เพื่อแก้ไขที่อยู่สำหรับการเรียกเก็บเงิน (หรือใช้องค์ประกอบสรุปและรายละเอียด) แทนการแสดงที่อยู่สำหรับการเรียกเก็บเงินในแบบฟอร์ม
ใช้ค่าการเติมข้อความอัตโนมัติที่เหมาะสมสำหรับที่อยู่สำหรับการเรียกเก็บเงิน เช่นเดียวกับที่ใช้สำหรับที่อยู่สำหรับจัดส่ง เพื่อให้ผู้ใช้ไม่ต้องป้อนข้อมูลมากกว่า 1 ครั้ง เพิ่มคำนำหน้าลงในแอตทริบิวต์การเติมข้อความอัตโนมัติหากคุณมีค่าที่แตกต่างกันสำหรับอินพุตที่มีชื่อเดียวกันในส่วนต่างๆ เช่น
<!-- Prefix with shipping or billing; note that the valid token is address-line1 (no hyphen before the digit) -->
<input autocomplete="shipping address-line1" ...>
...
<input autocomplete="billing address-line1" ...>
แสดงความคืบหน้าในการชำระเงิน
สำหรับแต่ละขั้นตอนในการชำระเงิน ให้ใช้ส่วนหัวของหน้าและค่าปุ่มที่สื่อความหมายซึ่งระบุสิ่งที่ต้องทำในตอนนี้และขั้นตอนการชำระเงินถัดไปอย่างชัดเจน
ใช้แอตทริบิวต์ enterkeyhint ในอินพุตของแบบฟอร์มเพื่อตั้งค่าป้ายกำกับแป้น Enter ของแป้นพิมพ์บนอุปกรณ์เคลื่อนที่ เช่น ใช้ enterkeyhint="previous" และ enterkeyhint="next" ภายในแบบฟอร์มหลายหน้า, enterkeyhint="done" สำหรับอินพุตสุดท้ายในแบบฟอร์ม และ enterkeyhint="search" สำหรับอินพุตการค้นหา
ช่วยให้ผู้ใช้ไม่ต้องป้อนข้อมูลการชำระเงินซ้ำ
โปรดตรวจสอบว่าได้เพิ่มค่า autocomplete ที่เหมาะสมในแบบฟอร์มบัตรสำหรับชำระเงินแล้ว หากไม่มีการเติมข้อความอัตโนมัติ ผู้ใช้อาจจดบันทึกรายละเอียดบัตรสำหรับชำระเงินไว้ในกระดาษหรือจัดเก็บไว้อย่างไม่ปลอดภัย
<!-- cc-number tells autofill this is a card number, not a generic number field -->
<!-- inputmode="numeric" gives a numeric keyboard without the increment/decrement spinner -->
<!-- DO NOT use type="number" — it adds increment/decrement controls and strips leading zeros -->
<input id="cc-number" name="cc-number" type="text" autocomplete="cc-number"
inputmode="numeric" maxlength="19" pattern="[\d ]{13,19}" required>
<!-- cc-name autofills with the name exactly as it appears on the card; Unicode pattern allows international names -->
<input id="cc-name" name="cc-name" type="text" autocomplete="cc-name"
maxlength="50" pattern="[\p{L} \-\.]+" required>
<!-- cc-exp autofills the full expiry date as MM/YY -->
<!-- MANDATORY: Place format hints above the input so autocomplete popovers or virtual keyboards do not obscure them during editing -->
<span id="exp-hint" class="hint">Format: MM/YY</span>
<input id="cc-exp" name="cc-exp" type="text" autocomplete="cc-exp"
aria-describedby="exp-hint" maxlength="5" required>
<!-- cc-csc autofills the security code; DO NOT use type="password" here -->
<input id="cc-csc" name="cc-csc" type="text" autocomplete="cc-csc"
inputmode="numeric" maxlength="4" pattern="[0-9]{3,4}" required>
แสดงคำแนะนำรูปแบบเหนืออินพุต
ในกรณีที่ช่องมีรูปแบบที่จำเป็น (เช่น วันหมดอายุของ MM/YY) ให้ใส่คำแนะนำในองค์ประกอบที่มองเห็นได้เหนืออินพุตและลิงก์ทั้ง 2 รายการด้วย aria-describedby ดังตัวอย่าง cc-exp ด้านบน คำแนะนำที่อยู่ด้านล่างช่องป้อนข้อมูลจะถูกซ่อนได้ง่ายๆ ด้วยแป้นพิมพ์บนอุปกรณ์เคลื่อนที่หรือป๊อปโอเวอร์การป้อนข้อความอัตโนมัติในขณะที่ผู้ใช้ต้องการ
อย่าใช้แอตทริบิวต์ placeholder เป็นคำแนะนำรูปแบบเพียงอย่างเดียว และอย่าใช้แทน <label> เนื่องจากข้อความตัวยึดตำแหน่งจะซ่อนทันทีที่ผู้ใช้เริ่มพิมพ์ จึงไม่สามารถตรวจสอบได้ขณะแก้ไข ตัวยึดตำแหน่งเป็นตัวชี้นำเพิ่มเติมที่ดีควบคู่ไปกับป้ายกำกับและคำแนะนำแบบถาวร
อย่ามาสก์รหัสความปลอดภัย
ใช้ type="text" กับ inputmode="numeric" สำหรับรหัสความปลอดภัยของบัตร ไม่ใช่ type="password" ผู้ใช้ไม่สามารถตรวจสอบรหัส 3 หรือ 4 หลักที่ถูกมาสก์ไว้เพื่อหาข้อผิดพลาดในการพิมพ์ ดังนั้นระบบจะไม่ตรวจจับตัวเลขที่พิมพ์ผิดจนกว่าการชำระเงินจะถูกปฏิเสธ และการมาสก์ช่วยเพิ่มการป้องกันได้เพียงเล็กน้อยเนื่องจากรหัสจะพิมพ์อยู่บนบัตรที่ผู้ใช้ถืออยู่
ใช้ช่องป้อนข้อมูลเดียวสำหรับบัตรสำหรับชำระเงินและหมายเลขโทรศัพท์
สำหรับบัตรสำหรับชำระเงินและหมายเลขโทรศัพท์ ให้ใช้อินพุตเดียว โดยอย่าแยกหมายเลขออกเป็นส่วนๆ ซึ่งจะช่วยให้ผู้ใช้ป้อนข้อมูลได้ง่ายขึ้น ทำให้การตรวจสอบง่ายขึ้น และช่วยให้เบราว์เซอร์ป้อนข้อความอัตโนมัติได้ พิจารณาทำเช่นเดียวกันกับข้อมูลตัวเลขอื่นๆ เช่น PIN และรหัสธนาคาร
ตรวจสอบอย่างละเอียด
คุณควรตรวจสอบความถูกต้องของข้อมูลที่ป้อนทั้งแบบเรียลไทม์และก่อนส่งแบบฟอร์ม วิธีหนึ่งในการดำเนินการนี้คือการเพิ่มแอตทริบิวต์รูปแบบลงในอินพุตบัตรสำหรับชำระเงิน หากผู้ใช้พยายามส่งแบบฟอร์มการชำระเงินที่มีค่าไม่ถูกต้อง เบราว์เซอร์จะแสดงข้อความเตือนและโฟกัสที่อินพุต
อย่างไรก็ตาม นิพจน์ทั่วไปของรูปแบบต้องมีความยืดหยุ่นเพียงพอที่จะรองรับความยาวของหมายเลขบัตรสำหรับชำระเงินที่หลากหลาย ตั้งแต่ 14 หลัก (หรืออาจน้อยกว่านั้น) ไปจนถึง 20 หลัก (หรือมากกว่านั้น) รหัสความปลอดภัยของบัตร (หรือที่เรียกว่า CSC, CVC, CVV หรือชื่ออื่นๆ) ประกอบด้วยตัวเลข 3 หรือ 4 หลัก
อนุญาตให้ผู้ใช้เว้นวรรคเมื่อป้อนหมายเลขบัตรสำหรับชำระเงินใหม่ เนื่องจากหมายเลขจะแสดงในลักษณะนี้บนบัตรจริง ซึ่งเป็นมิตรกับผู้ใช้มากกว่า (คุณไม่ต้องบอกผู้ใช้ว่า "พวกเขาทำอะไรผิด") มีโอกาสน้อยที่จะขัดจังหวะขั้นตอน Conversion และการนำช่องว่างในตัวเลขออกก่อนประมวลผลก็ทำได้ง่าย
ช่วยป้องกันไม่ให้ผู้ใช้พลาดฟิลด์ข้อมูลโดยไม่ตั้งใจ
เพิ่มแอตทริบิวต์ required ลงในช่องที่ต้องกรอก เบราว์เซอร์ที่ทันสมัยจะแสดงข้อความแจ้งและโฟกัสข้อมูลที่ขาดหายไปโดยอัตโนมัติ
กลยุทธ์สำรอง
การป้อนข้อความอัตโนมัติเป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง ในเบราว์เซอร์ที่ไม่รองรับการป้อนข้อความอัตโนมัติ ผู้ใช้จะต้องป้อนรายละเอียดการชำระเงินด้วยตนเอง ข้อจำกัด HTML เชิงความหมาย (เช่น type, inputmode, pattern และ required) จะยังคงทำงานอย่างเหมาะสมเพื่อตรวจสอบข้อมูลที่ผู้ใช้ป้อนและแสดงแป้นพิมพ์เสมือนที่ถูกต้อง