מרכז ההדרכות של סקולילנד

שדה Color Picker ב-Fluent Forms

שדה Color Picker ב-Fluent Forms #

Color Picker הוא שדה קלט לבחירת צבע המאפשר לך לבחור את הצבע שלך בעיצוב ערכי הקסדצימלי בן 6 ספרות.

Fluent Forms מוסיף שדה Advanced Color Picker לעורך הטפסים. יהיה לך היכולת להוסיף צבעים מותאמים עם בוחר צבע.

  • כדי להוסיף שדה זה לטופס שלך, גרור והנח את השדה מבין שדות הקלט המתקדמים הזמינים.
  • כדי להפעיל התאמה אישית, לחץ על אייקון העריכה שאתה מקבל בעת ריחוף מעל השדה. או לחץ על הכרטיסייה Input Customization (התאמה אישית של הקלט) בסרגל הצד הימני כאשר בוחר את השדה.

בחלק ה-Input Customization, אתה יכול להתאים אישית את שדה הקלט בדרכים הבאות. בחלק זה תמצא 2 חלקים:

  1. Basic Options (אפשרויות בסיסיות)
  2. Advanced Options (אפשרויות מתקדמות)

אפשרויות בסיסיות #

בצד ימין של הכרטיסייה, יש כמה אפשרויות בסיסיות חשובות המפורטות להלן:

  • Element Label (תווית האלמנט): זהו הטקסט שהמשתמשים יראו בטופס עבור שדה Color Picker. אתה יכול להכניס כאן כל טקסט שעוזר להבין את התכלית של השדה הזה.
  • Admin Field Label (תווית השדה של מנהל): אם אתה רוצה להציג תווית שונה למשתמשי מנהל שלך כאשר הם צופים בהגשות הטופס, אתה יכול להגדיר זאת באמצעות אפשרות זו. אין לזה השפעה בפועל על הטופס; רק למטרות מנהליות.
  • Placeholder (מציין מקום): אתה יכול גם לכלול מציין מקום שדרכו המשתמשים יתפסו את נושא השדה.
  • Default value (ערך ברירת מחדל): אתה יכול להגדיר ידנית כל ערך קבוע בשדה שלך, אתה יכול גם להצמיד מראש את שדה הקלט שלך בצורה דינמית באמצעות ה-shortcodes (קודי חיתוך) הזמינים שלנו. כדי להבין טוב יותר את Dynamic Default Value (ערך ברירת מחדל דינמי), קרא את המדריך הזה.
  • Label Placement (מיקום התווית): קבע את מיקום התווית שהגדרת קודם לכן ביחס לשדה הקלט. האפשרויות הזמינות הן Top (למעלה), Left (לשמאל), Right (לימין), ו-Default (ברירת מחדל). כל אלה הם מוסברים בעצמם מלבד Default. המשמעות היא שהוא ייצג את הגדרות מיקום התווית הגלובליות שלך.
  • Required (נדרש): קבע האם השדה יכול להיות ריק או לא כאשר המשתמש שולח את הטופס שלך על ידי בחירת האפשרות המתאימה מכאן.

אפשרויות מתקדמות #

ההתאמות המתקדמות הזמינות עבור שדות קלט Color Picker הן כדלקמן:

  • Name Attribute (תכונת Name): תכונת Name של שדה הקלט היא השקילה HTML של אותו שם. אתה לא צריך לשנות את זה.
  • Help Message (הודעת עזרה): כדי להנחות את המשתמש שלך היטב, אתה יכול להשתמש באפשרות זו. פשוט הוסף את הטקסט שלך כאן, והוא יוצג כהודעת עזרה למשתמש.
  • Container Class (Class של הקונטיינר): השתמש באפשרות זו כדי להוסיף את שיעורי ה-CSS המותאמים שלך לעטיפה של השדה.
This image has an empty alt attribute; its file name is color-picker-3.png
  • Element Class (Class של האלמנט): באופן דומה, אתה יכול להוסיף שיעורי CSS מותאמים לשדה הקלט עצמו.
  • Conditional Logic (לוגיקה תנאית): אתה יכול ליצור כללים מסוימים כדי להסתיר/להציג באופן דינמי את שדה הקלט בהתאם לערכים מכמה שדות אחרים. כדי להבין טוב יותר את Conditional Logic, קרא את זה.
  • Save (שמור) את הטופס כאשר ההתאמה האישית הושלמה.
  • לאחר צפייה בטופס, הוא יופיע כמו בתמונת המסך שלהלן:
  • אתה יכול לבחור כל צבע שאתה רוצה. הצבע יהיה שנוצר כערכי Hex בן 6 ספרות.
  • אל תשכח ללחוץ על הכפתור Save (שמור) לאחר בחירת הצבע הרצוי שלך.

אהבתם? מוזמנים לשתף:

מדריך זה היה שימושי?

  • Happy
  • Normal
  • Sad

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *