שדה כפתור Submit מותאם אישית ב-Fluent Forms #
ב-Fluent Forms, שדה ה-Custom Submit Button (כפתור Submit מותאם אישית) משמש להחלפת כפתור ה-Submit (הגשה) הברירת המחדל של הטופס. כפתור ה-Submit הברירת המחדל נוצר באופן אוטומטי כאשר אתם יוצרים טופס והוא מוצב מתחת לכל שדות הטופס. אולם, ייתכן שתרצו לקבל עמדה וסגנון משלכם לכפתור במקום זה של ברירת המחדל. בנסיבות אלו, שדה ה-Custom Submit Button יהיה הפתרון הנדרש.
ההבדלים היחידים בין כפתור ה-Submit הברירת המחדל לכפתור ה-Submit המותאם אישית הם תכונת שינוי המיקום, אפשרויות סגנון מותאם אישית, והיגיון מותנה. עמדת כפתור ה-Submit הברירת המחדל קבועה מתחת לטופס וחסרה לו היגיון מותנה, אך כפתור ה-Submit המותאם אישית יכול לשמש כ-inline עם שדות טופס אחרים בתוך מיכל וללבוש תכונת היגיון מותנה.
- כדי להוסיף שדה זה לטופס שלכם, גררו ושחררו את השדה מאפשרויות הקלט המתקדמות הזמינות. ניתן להוסיף שדות קלט לטופס בדרכים שונות. תחילה, בואו ניצור טופס.
- כדי לאפשר התאמה אישית, לחצו על אייקון העריכה שתקבלו בעת ריחוף על השדה. או לחצו על הכרטיסייה Input Customization (התאמה אישית של קלט) בסרגל הצד הימני כאשר אתם בוחרים בשדה.
בסעיף Input Customization, תוכלו להתאים אישית את שדה הקלט בדרכים הבאות. בסעיף זה, תמצאו 2 חלקים:
- Basic Options (אפשרויות בסיסיות)
- Advanced Options (אפשרויות מתקדמות)
אפשרויות בסיסיות #
בצד ימין של הכרטיסייה, ישנן כמה אפשרויות בסיסיות חשובות שמתוארות להלן:
- Submit Button (כפתור Submit): Default (ברירת מחדל) או Image (תמונה); שתי אפשרויות אלו זמינות בתוך אפשרות Submit Button. המשתמשים יכולים להשאיר כפתור זה כברירת מחדל או לבחור באפשרות Image עם URL של תמונה.
- Button Style (סגנון כפתור): כמתואר קודם לכן, העיצוב הבסיסי והפונקציונליות האחרת של כפתור ה-Submit המותאם אישית זהים לברירת המחדל. אולם, תוכלו להיכנס לעומק ולשנות את ערכת הצבעים שהוגדרה מראש שלו, את המיקום, או את הפעולה של הכפתור.
- Background color (צבע רקע): תנו צבע רקע מתאים לכפתור בהתאם לערכת הצבעים של אתר הווב שלכם. במקרה שלי, צבע הרקע הוא הכחול ברירת המחדל.
- Text Color (צבע הטקסט): תוכלו לתת צבע חלק לטקסט של הכפתור בהתאם לצבע הרקע. במקרה שלי, טקסט הכפתור הוא לבן (#ffffff), המתאים בצורה מושלמת לרקע הכחול.
- Border Color & Radius (צבע הגבול וקוטר הפינות): לכפתור, כברירת מחדל, יש גבול בעובי של פיקסל אחד. תוכלו גם להגדיר צבע לגבול. במקרה שלי, נתתי צבע כהה מעט יותר מצבע הרקע, וזהו הסטנדרט. כמו כן, תוכלו לתת קוטר פינות לכפתור בהתאם למה שמתאים לטופס.
- Min-Width (רוחב מינימום): תוכלו לתת רוחב מינימום לכפתור הן בפיקסלים והן באחוזים, כפי שמתאים לטופס שלכם. רוחב מינימום של 100% יהיה כפתור ברוחב מלא.
- Button Size (גודל כפתור): אפשרות זו קובעת את גודל הכפתור. Small (קטן), Medium (בינוני) ו-Large (גדול) – שלוש אפשרויות אלו זמינות עם Button Size.
- Content Alignment (יישור תוכן): אפשרות זו קובעת כיצד התוכן יתויישר.
כמו כן, תוכלו להשתמש בתכונות סגנון זהות בדיוק לחזות Hover (ריחוף) של הכפתור. לחצו על חזות ה-Hover וביצעו את אותם סוגי תכונות סגנון המתאימות לסגנונות המצב הפעיל.
אפשרויות מתקדמות #
התאמות המתקדמות הזמינות לשדה Custom Submit Button הן כדלקמן:
- Container Class (מחלקת מיכל): השתמשו באפשרות זו כדי להוסיף את מחלקות ה-CSS המותאמות אישית שלכם ל-wrapper של השדה.
- Element Class (מחלקת אלמנט): באופן דומה, תוכלו להוסיף מחלקות CSS מותאמות אישית לשדה הקלט עצמו.
- Conditional Logic (היגיון מותנה): תוכלו ליצור כללים מסוימים כדי להסתיר/להציג באופן דינמי את שדה הקלט בהתאם לערכים משדות אחרים. כדי להשיג הבנה טובה יותר של Conditional Logic, קראו את המאמר הזה.
- Save (שמור) את הטופס כאשר ההתאמה האישית הושלמה.