טופסי התשלום הם החלק הכי חשוב בתהליך התשלום. עיצוב לא טוב של טופס התשלום הוא סיבה נפוצה לנטישת עגלת הקניות.
צרו טופס שמאפשר למשתמשים להזין פרטי תשלום בקלות במחשב ובנייד. מוודאים שהטופס מנצל את התכונות המובנות בדפדפן למילוי אוטומטי, לאימות ולהגבלות על הזנת נתונים.
איך מטמיעים
בהמשך מפורטות ההנחיות החשובות ביותר ליצירת טופסי תשלום מוצלחים.
שימוש ב-HTML תקין ומשמעותי
כדאי להפיק את המרב מהרכיבים ומהמאפיינים שנועדו ליצירת טפסים:
<form>,<input>,<label>וגם<button>-
type,autocompleteוגםinputmode
התפקידים האלה מפעילים פונקציונליות מובנית בדפדפן, משפרים את הנגישות ומוסיפים משמעות לתגי העיצוב.
משתמשים ברכיב <label> כדי לתייג שדות בטופס להזנת נתונים
כדי לתייג <input>, <select> או <textarea>, משתמשים ב-<label>. כדי לשייך תווית לקלט, נותנים למאפיין for של התווית את אותו ערך כמו של המאפיין id של הקלט.
איך להפיק את המקסימום ממאפייני HTML
כדי להקל על המשתמשים להזין נתונים, משתמשים במאפיין המתאים של רכיב <input> <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, וודאו שה-backend שלכם תומך ב-Unicode באופן מאובטח גם כקלט וגם כפלט. דפדפנים מודרניים תומכים היטב ב-Unicode בביטויים רגולריים.
לאפשר מגוון פורמטים של כתובות
כשמוסיפים שדות של כתובת בטופס תשלום, חשוב לזכור שיש מגוון פורמטים של כתובות, אפילו במדינה אחת. אל תניחו הנחות לגבי כתובות "רגילות".
אם דרישות הנתונים שלכם מאפשרות זאת, כדאי להשתמש ברכיב <textarea> יחיד לכתובת. זו האפשרות הגמישה ביותר למגוון פורמטים של כתובות מקומיות ובינלאומיות.
שימוש בהשלמה אוטומטית של הכתובת לחיוב
כברירת מחדל, הכתובת לחיוב זהה לכתובת למשלוח. כדי להפחית את העומס החזותי, כדאי לספק קישור לעריכת הכתובת לחיוב (או להשתמש ברכיבי סיכום ופרטים) במקום להציג את הכתובת לחיוב בטופס.
השתמשו בערכי השלמה אוטומטית מתאימים לכתובת לחיוב, בדיוק כמו שאתם עושים לכתובת למשלוח, כדי שהמשתמש לא יצטרך להזין נתונים יותר מפעם אחת. אם יש לכם ערכים שונים לקלט עם אותו שם בקטעים שונים, הוסיפו מילת קידומת למאפייני ההשלמה האוטומטית. לדוגמה:
<!-- 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), צריך להציב את הרמז ברכיב גלוי מעל הקלט ולקשר בין השניים באמצעות aria-describedby, כמו בדוגמה של cc-exp למעלה. רמזים שמופיעים מתחת לשדה קלט יכולים להיות מוסתרים בקלות על ידי המקלדת בנייד או על ידי החלון הקופץ של המילוי האוטומטי ברגע שהמשתמש צריך אותם.
אל תסתמכו על המאפיין placeholder בתור הרמז היחיד לעיצוב, ואל תשתמשו בו במקום <label>: הטקסט לדוגמה מוסתר ברגע שהמשתמש מתחיל להקליד, ולכן אי אפשר לבדוק אותו במהלך העריכה. אפשר להשתמש בפלייסהולדר כרמז נוסף לצד התווית והרמז הקבוע.
אל תסתירו את קוד האבטחה
צריך להשתמש ב-type="text" עם inputmode="numeric" לקוד האבטחה של הכרטיס, ולא ב-type="password". המשתמשים לא יכולים לבדוק אם יש שגיאות הקלדה בקוד מוסתר בן שלוש או ארבע ספרות, ולכן ספרה שהוקלדה באופן שגוי לא מזוהה עד שהתשלום נדחה. בנוסף, ההסתרה לא מוסיפה הרבה הגנה כי הקוד מודפס על הכרטיס שהמשתמש מחזיק.
שימוש בשדה קלט אחד לכרטיס תשלום ולמספרי טלפון
בשדות של מספרי כרטיסי תשלום ומספרי טלפון, צריך להשתמש בשדה קלט אחד: אל תפצלו את המספר לחלקים. כך למשתמשים קל יותר להזין נתונים, האימות פשוט יותר והדפדפנים יכולים למלא את הפרטים באופן אוטומטי. כדאי לעשות את אותו הדבר עם נתונים מספריים אחרים, כמו קודי אימות וקודי בנק.
חשוב לבדוק את הפרטים בקפידה
חשוב לאמת את הזנת הנתונים גם בזמן אמת וגם לפני שליחת הטופס. אחת הדרכים לעשות זאת היא להוסיף מאפיין תבנית לשדה הקלט של כרטיס התשלום. אם המשתמש מנסה לשלוח את טופס התשלום עם ערך לא חוקי, הדפדפן מציג הודעת אזהרה ומדגיש את השדה.
עם זאת, הביטוי הרגולרי של התבנית צריך להיות גמיש מספיק כדי לטפל בטווח האורכים של מספרי כרטיסי התשלום: מ-14 ספרות (או אולי פחות) עד 20 (או יותר). קודי אבטחה של כרטיסים (שנקראים גם CSC, CVC, CVV או שמות אחרים) מורכבים מ-3 או 4 ספרות.
אפשרו למשתמשים להוסיף רווחים כשהם מזינים מספר כרטיס תשלום חדש, כי ככה המספרים מוצגים בכרטיסים פיזיים. זה יותר ידידותי למשתמש (לא תצטרכו להגיד לו "שהוא עשה משהו לא נכון"), יש פחות סיכוי שזה יפריע לתהליך ההמרה, וקל להסיר רווחים במספרים לפני העיבוד.
עוזרים למשתמשים לא לפספס בטעות שדות נתונים
מוסיפים את המאפיין required לשדות החובה. דפדפנים מודרניים מציגים באופן אוטומטי בקשה להשלמת נתונים חסרים וממקדים את תשומת הלב של המשתמשים בהם.
אסטרטגיות חלופיות
מילוי אוטומטי הוא שיפור הדרגתי (progressive enhancement). בדפדפנים שלא תומכים במילוי אוטומטי, המשתמשים יצטרכו להזין את פרטי התשלום שלהם באופן ידני. האילוצים הסמנטיים של HTML (כמו type, inputmode, pattern ו-required) עדיין יפעלו כראוי כדי לאמת את הקלט של המשתמשים ולספק את המקלדות הווירטואליות הנכונות.