חבר מביא חבר
ומקבל 10% החזר!

הפנו אלינו חבר שמעוניין בשירות שלנו
וקבלו 10% מהעסקה אליכם.

פשוט אמרו לחבר להגיד שאתם שלחתם אותו 😉

איך בונים טופס מודולרי בעזרת התוסף Conditional Fields

במאמר הזה אני אראה איך בונים טופס Conditional Fields מודולרי לאתרי וורדפרס (Wodrpress) בעזרת 2 תוספים:

  1. התוסף cf7 (Contact Form 7) – תוסף מתקדם לבניית טפסים.
  2. התוסף Conditional Fields – תוסף להתניית שדות בטפסי Contact Form 7.

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

לפני שמתחילים להתקדם, מי שעדיין לא מכיר את התוסף Contact Form 7 ואיך בונים איתו טפסים, מוזמן לקרוא את המאמר הזה.

מהו טופס Conditional Fields מודולרי

נתחיל מהמושג…

מודולרי – מערכת (מוצר/שירות) שמורכב ממספר מודולים קטנים. תכונה שמתארת עד כמה המערכת גמישה ומותאמת לשינויים. ז״א כמה מאמץ ומשאבים אני צריך כדי להתאים אל המערכת שלי לכל לקוח.

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

איך נראה טופס Contact Form 7 לא מודולרי?

זה קוד של טופס Contact Form 7 יחסית פשוט שמכיל את השדות: שם, מייל, נושא והודעה. ניתן לראות שהנושא הוא רשימה נפתחת עם טווח תשובות מוגבל וידוע מראש.

				
					<h2>טופס צור קשר</h2>

<label> שם מלא
    [text* your-name] </label>

<label> אימייל
    [email* your-email] </label>

<label> נושא
    [select* your-subject id:subject include_blank "בקשה להצעת מחיר" "הצעת שת״פ" "דיווח על בעיה באתר"] </label>

<label> הודעה
    [textarea your-message] </label>

[checkbox newsletter id:newsletter default:1 use_label_element "אני מאשר לקבל מכם מבצעים והטבות במייל."]

[checkbox* terms_of_use id:terms_of_use use_label_element "אני מאשר שקראתי את תנאי השימוש."]

[submit "שליחה"]
				
			

איך הלקוח יראה את הטופס הזה?

טופס משודרג
טופס משודרג (תיבה פתוחה)

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

הוספת תתי שאלות

אני יכול להוסיף תתי שאלות בטופס שלי ואז הקוד שלי יראה כך:

				
					<h2>טופס צור קשר</h2>

<label> שם מלא
    [text* your-name] </label>

<label> אימייל
    [email* your-email] </label>

<label> נושא
    [select* your-subject id:subject include_blank "בקשה להצעת מחיר" "הצעת שת״פ" "דיווח על בעיה באתר"] </label>

<label> חבילה
    [select package id:package include_blank "ניהול סושיאל" "קהילה דיגיטלית" "אתר תדמית + תחזוקה חודשית"] </label>

<label> תחום
    [select domain id:domain include_blank "בארטר" "לידים" "ניהול קהילה ומועדון לקוחות"] </label>

<label> סוג
    [select type id:type include_blank "כפתור לא עובד" "דף לא נמצא" "שגיאת כתיב"] </label>

<label> הודעה
    [textarea your-message] </label>

[checkbox newsletter id:newsletter default:1 use_label_element "אני מאשר לקבל מכם מבצעים והטבות במייל."]
[checkbox* terms_of_use id:terms_of_use use_label_element "אני מאשר שקראתי את תנאי השימוש."]

[submit "שליחה"]
				
			

הזמן הטוב ביותר לבנות אתר לעסק הוא בפתיחת העסק,
הזמן השני הטוב ביותר הוא עכשיו!

הוספתי את השדות בחירת חבילה, תחום וסוג בהתאם לתשובת הלקוח בשדה נושא.
זוכרים מה אומרת ה-*? 3 התתי השאלות הן אינן חובה, לכן הלקוח יענה רק על מה שרלוונטי, אם בכלל 😅

וכך יראה הטופס שלנו עכשיו…

טופס עם תתי שדות
טופס עם תתי שדות פתוח

ניתן לראות שעכשיו אני יכול לשאול את הלקוח גם את תת השאלה שתהיה לי. אבל... אמרנו שאנחנו לא רוצים לתת ללקוח הרגשה שאנחנו מזלזלים בזמן שלו. מה יקרה אם יהיה לי קינון שאלות ברמה 3 ואולי 4? שאלה בתוך שאלה בתוך שאלה... בדיוק על זה נכתב המאמר 😁

בניית טופס מודולרי עם התוסף Conditional Fields

אז אחרי שאנחנו מתקינים את התוסף (קישור בתחילת המאמר). מתווספת לנו לשונית נוספת לממשק עריכת הטופס. הלשונית החדשה נקראת Conditional Fields והיא מאפשרת לנו לבצע התניה בין שדות. ז״א שדה שיוצג/יוסתר ע״י תנאי מסויים.

הוספת קבוצה מותנת עם התוסף Conditional Fields

ע״מ להתנות שדה או מספר שדות אנחנו יוצרים קבוצה ע״י לחיצה על הקיצור ״Conditional Fields Group״ בחלק העליון של הלשונית ״טופס״ או שמוסיפים את הקוד באופן ידני.
הקוד של קבוצה מותנת יראה כך:

				
					[group package clear_on_hide][/group]
				
			

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

בואו נשלב קבוצות בתוך הטופס שלנו.

				
					<h2>טופס צור קשר</h2>

<label> שם מלא
    [text* your-name] </label>

<label> אימייל
    [email* your-email] </label>

<label> נושא
    [select* your-subject id:subject include_blank "בקשה להצעת מחיר" "הצעת שת״פ" "דיווח על בעיה באתר"] </label>

[group package clear_on_hide]
<label> חבילה
    [select* package id:package include_blank "ניהול סושיאל" "קהילה דיגיטלית" "אתר תדמית + תחזוקה חודשית"] </label>
[/group]

[group domain clear_on_hide]
<label> תחום
    [select* domain id:domain include_blank "בארטר" "לידים" "ניהול קהילה ומועדון לקוחות"] </label>
[/group]

[group type clear_on_hide]
<label> סוג
    [select* type id:type include_blank "כפתור לא עובד" "דף לא נמצא" "שגיאת כתיב"] </label>
[/group]

<label> הודעה
    [textarea your-message] </label>

[checkbox newsletter id:newsletter default:1 use_label_element "אני מאשר לקבל מכם מבצעים והטבות במייל."]
[checkbox* terms_of_use id:terms_of_use use_label_element "אני מאשר שקראתי את תנאי השימוש."]

[submit "שליחה"]
				
			
25% הנחה!
על הקורסים הדיגיטליים המובילים בעולם הפיננסי!

התניית הקבוצות

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

נעבור עכשיו ללשונית Conditional Fields ונגדיר את התנאים.

לשונית Conditional Fields

הוספת תנאי

ע״מ ליצור תנאי חדש, נלחץ על הכפתור add new conditional rule ונגדיר את התנאי כך:

  • if (אם) – נבחר את שם השדה שנרצה לבדוק. במקרה שלנו, your-subject.
  • equals (שווה) / not equals (לא שווה) – נבחר האם התשובה של הלקוח באותו שדה שווה או לא שווה לערך שאנחנו משווים.
  • value (ערך) – נכניס את הערך להשוואה.
  • select group – נבחר את שם הקבוצה שתושפע מהתנאי. תנאי התקיים = הקבוצה תוצג ולהפך.
אז ככה יראה התנאי הראשון שלנו שיציג את הקבוצה ״חבילה״ רק אם הלקוח בחר בנושא ״בקשה להצעת מחיר״.
תנאי ראשון Conditional Fields

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

אני אכניס את שאר התנאים שלנו ונקבל את התוצאה הזאת.

זהו… קיבלנו טופס מודולרי שמציג ללקוח רק שאלות רלוונטיות אליו.

ניתן להוסיף עוד המון אפשרויות אבל זה כבר למאמר על טופס על חלל 🚀

לסיכום

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

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

Digital Cobwebs מתמחים בבנייה וניהול נכסים דיגיטליים, קהילות ואתרים. בנוסף, אנחנו מתמחים בגיבוש ובניית מודל עיסקי שמתאים לך ולעסק שלך.

מוזמנים לשאול שאלות בתגובה או סתם לפרגן!

כתיבת תגובה

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

קטגוריות

לנהל עסק זה להיות חדשני

החברים שלנו מקבלים הטבות בלעדיות ועדכונים על חדשנות לעסק ישירות לתיבת המייל שלהם.

אהבתם? תנו לנו לייק!

פוסטים נוספים שיעניינו אותך