עיצוב טופס רשמי של Fluent Forms #

Fluent Forms מעוצב כך שיראהויתאים לכל תבנית WordPress ויראה מעולה. עם זאת, ייתכן שתצטרך לעצב את הטופס עוד יותר כדי שיידמה לשאר אתר האינטרנט שלך.

הצגת עיצוב טופס רשמי עבור Fluent Forms #

ללא כל ניסיון בקידוד, עיצוב הטופס מאפשר לך לבנות עיצוב מותאם אישית לטופס. במאמר זה, נראה לך כיצד לעצב במהירות וביעילות את אלמנטים התבניות של Fluent Forms ולפריסות באמצעות עיצוב הטופס בכמה קליקים בלבד

• לאחר שסיימת לבנות את הטופס, עבור לפינה העליונה הימנית של Editor (עורך), שמור (שמור) את הטופס, ובחר ב-Preview & Design (תצוגה עיצוב) כדי להיכנס לחלון התצוגה המקדימה, שם תוכל להתחיל לעצב אותו.

חלק העיצוב מורכב משלוש לשוניות.

• General (כללי)
• Misc (שונות)
• Import (יבוא)

• ה-General Tab (לשונית כללית) משמשת לעיצוב כל אלמנט של הטופס, בעוד ש-Misc Tab (לשונית שונות) משמשת לעיצוב רקע Container (קונטיינר) של הטופס, ריפוד וחיצים, וה-Import tab (לשונית יבוא) בוחרת בסגנון קיים של Fluent Forms וגם יכולה ל-Import (ייבא) את הסגנון שלך.

General (בחר בסגנונות מוגדרים מראש) #

• כפי שמוצג בצילום המסך שלעיל, תוכל לבחור כמה סגנונות מוגדרים מראש מ-Form Style Templates (תבניות סגנון טופס). יש חמש מערכות סגנון שונות לבחירה. Modern Bold (מודרני אמיץ), Modern Light (מודרני קל), Classic (קלאסי) ו-Bootstrap Style (סגנון Bootstrap) הם כל הסגנונות המורשים מהתבנית.

אתה יכול גם להתאים אישית את ה-preset על ידי בחירת אפשרות של התאמה אישית של ה-preset הזה. אתה יכול לשנות את Label Styles (סגנונות תווית), Input & Textarea (קלט וטקסט), Placeholder (מציין מקום), Radio & Checkbox Style (סגנון רדיו ותיבת סימון) ו-Submit Button Style (סגנון כפתור שליחה) מאפשרות התאמה אישית של Preset זו.

• אתה עדיין יכול להתאים אישית כמה סגנונות טופס בעת שימוש בקבוצת הסגנון המוגדרת מראש. קחו בחשבון את הסגנון ורקע ה-Container, למשל. עבור ללשונית Misc (שונות), שנמצאת ממש אחרי General Tab (לשונית כללית), כדי לערוך סגנונות טופס אלה.

Misc (סגנון Container של הטופס) #

• כפי שמוצג בצילום המסך שלהלן, אתה יכול להתאים אישית את צבע הרקע, הריפוד והשוליים של Container של הטופס.

• Form Border Settings (הגדרות גבול טופס): הפעל את הגדרות גבול הטופס וציין את סוג הגבול, הצבע, הרוחב וה-radius של הגבול.

סגנונות אסטריסק #

בחר בצבע של סגנונות אסטריסק של הטופס שלך.

סגנונות הודעת שגיאה מוטבעת #

• צבע הודעת השגיאה המוטבעת ניתן להתאמה אישית. כפי שמוצג בצילום המסך שלהלן, הגדר את הטיפוגרפיה, כולל גודל גופן, משקלי גופן, קישוט טקסט, גובה קו וריווח אותיות, בין היתר.

סגנונות הודעת הצלחה לאחר שליחה #

• אתה יכול בקלות להתאים אישית את הודעת ההצלחה לאחר השליחה (After Submit Success Message). מלא את הטופס שלך והגש אותו לתצוגה ויזואלית בעת עיצוב הודעת הצלחת ההגשה למטרות בדיקה.

• אתה יכול להתאים אישית את הרקע והגופנים. שנה את גודל הגופן, המשקל, קישוט הטקסט, גובה הקו וריווח האותיות, בין היתר. צל התיבה של תיבת הודעת ההצלחה יכול להיות מוגדר מתחת להגדרות הטיפוגרפיה.

סגנונות הודעת שגיאה לאחר שליחה #

• ניתן גם להתאים אישית את הודעת השגיאה לאחר ההגשה (After Submit Error Message). הסגנונות של After Submit Success Message (הודעת הצלחה לאחר שליחה) זהים לסגנונות הודעת ההצלחה לאחר ההגשה.

• הגדר את צבע הרקע וצבע הגופן. הגדר את גודל הגופן, המשקל, קישוט הטקסט, גובה הקו וריווח האותיות, בין היתר.

• אתה יכול גם להגדיר את צל התיבה של תיבת הודעת ההצלחה מתחת להגדרות הטיפוגרפיה.

Custom (התאמה אישית מתקדמת) #

• אתה יכול להתאים אישית את input fields (שדות קלט) בהתאם להעדפות והצרכים שלך באמצעות Custom Advanced Customization (התאמה אישית מתקדמת מותאמת) תחת ה-General Tab (לשונית כללית).

סגנונות תווית #

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

סגנונות קלט וטקסט #

• הגדר שדות input (קלט) ואזורי טקסט עם צבעי רקע וטקסט. שנה את גודל הגופן, משקל הגופן, קישוט הטקסט, גובה הקו, ריווח האותיות וכו’. צל התיבה של תיבות ה-input ו-text-area יכול להיות מוגדר מתחת להגדרות הטיפוגרפיה.

• אתה יכול להוסיף סגנון לשדות input (קלט) ולאזורי טקסט בעת לחיצה ב-Focus (פוקוס). זהה לאפשרויות העיצוב הסטנדרטיות.

סגנונות מציין מקום #

• בחר בצבע של מציינים מקום בשדה input (קלט). הגדר את הטיפוגרפיה כמוצג בצילום המסך, הכולל Font Size (גודל גופן), Font Weights (משקלי גופן), Text Decoration (קישוט טקסט), Line Height (גובה קו) וריווח אותיות, בין היתר.

סגנון רדיו ותיבת סימון #

• תראה שלוש אפשרויות עיצוב עבור שדות radio (רדיו) ו-checkbox (תיבת סימון) כאשר אתה מפעיל smart UI (ממשק משתמש חכם). כאשר רדיו או תיבת סימון בדוקה, הגדר את צבעי הגבול, הפריט והרקע.

סגנון כפתור שליחה #

• כברירת מחדל, Fluent Forms מעצב את צבע כפתור ההגשה (Submit button) בכחול אודג’. אך אתה לא מוגבל לזה; התאם אישית את סגנונות כפתור ההגשה בהתאם להעדפות שלך.

• עיצוב כפתור ההגשה (Submit button) זהה לעיצוב כפתור ההבא והקודם של ריבוי עמודים. בחר צבע רקע כפתור, צבע טקסט, טיפוגרפיה, אפשרויות גבול וצללי תיבה עבור מצבי רגיל (normal) והעברה (hover) כאחד.

Import (יבוא) #

אתה יכול ל-Import (ייבא) את סגנון הטופס שלך מטופס קיים אחר או שאתה יכול גם להעלות את סגנון Fluent Forms שלך.