חיפוש

טפסי אלמנטור מא' עד ת'

  • עודכן לאחרונה: 12/01/2024
  • ב: וורדפרס
  • זמן קריאה: 21 דקות
  • 12 תגובות
אין ספק שווידג'ט הטפסים של אלמנטור פרו הביא המון שינויים ושדרוגים לאלמנטור, כאשר הופיע לראשונה. עדיין יש בו לא מעט חסרונות בהשוואה לתוספי טפסים לוורדפרס, אך בפוסט היום ארצה להתמקד באיך לשדרג את טפסי האלמנטור שלנו, עם דוגמאות ממקורות מידע שונים.

תוכן עניינים

מחפשים את תוכן העניינים?
הרכיב נמצא בתחתית המסך בצד שמאל 🙂

שדות רגילים, שדות HTML, אופציות לשדות הקיימים

מתחילים מהבסיס, וידג'ט הטופס של אלמנטור מאפשר את האופציה למבקר באתר להשאיר פרטים ("ליד") על מנת שנוכל ליצור עימו קשר, בין עם זה דרך אימייל, מספר טלפון, או כל פעולה מוגדרת אחרת. הרשמות לרשימות דיוור, ניוזלטרים, טפסי הרשמה וטפסי התחברות, מייל אישור ומייל HTML רגיל – ניתן לבנות ולעשות דרך טופס אלמנטור.
האפשרויות שיש בשדות טופס של אלמנטור הן:

  • טקסט
  • אימייל
  • כתובת URL
  • טלפון
  • אפשרויות בחירה
  • בחירה
  • תיבת סימון
  • הסכמה
  • מספר
  • תאריך
  • זמן
  • העלאת קבצים
  • סיסמה
  • HTML
  • מוסתר
  • recaptcha
  • recaptcha v3
  • מלכודת דבש
  • שלב

כל שדה מגיע עם ולידציה מובנית. לדוגמה, אימייל שהוזן ללא @, לא יתן לשלוח את הטופס.
שדה URL שלא הוזן בו לינק עם קידומת https, לא יתקבל.
כל שדה ניתן להפוך לשדה חובה, שללא מילוי של השדה, לא נשלח הטופס. 
ניתן להפוך את הטופס גם לטופס רב שלבי על ידי הוספת שדה "שלב" ולהפריד שדות של טפסים לשלבים לנוחיות המשתמש – על מנת לא להעמיס על משתמש הקצה המון שדות ולגרום לנטישת מילוי טופס עקב ריבוי שדות למילוי.
על עולמם של השדות המוסתרים של טפסי אלמנטור אפרט בהמשך הפוסט.

נגישות, פוקוס שדות וחסרונות הטופס

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

״על רגל אחת":

  • חובה תיאור לשדות label מותאם לכל שדה טופס – חובה שיהיה Label מותאם ותיאור מותאם. שדה אימייל חייב להיות עם input=email, שיש בו לייבל שלא נעלם בעת הקלדה (Label ולא Placeholder!)
  • ה-Placeholder חייב לתת אינדיקציה לפורמט של מילוי שדה בצורה נכונה, לדוגמה: israel@israeli.com
  • סימון שדות חובה – ויזואלית ע"י סימן כוכבית + קוד: כל שדה חובה חייב להיות עם סממן ויזואלי שהינו במצב חובה. לדוגמה סימון כוכבית (*) או המילים: שדה חובה. גם ברמת הקוד חייבת להיות אינדיקציה של שדה חובה, למזלנו אלמנטור מטפל בזה בצורה נכונה ברגע שמעבירים את השדה למצב חובה.
  • כל טופס מצריך הסבר משמעות סימן (*) לפני טופס. ניתן להוסיף על ידי שדה HTML עם טקסט לפני כל טופס.
  • סימון שגיאות ותיאור שגיאות בצורה ברורה ובשפה של האתר – לצערנו כאן אלמנטור לא תמיד נותן אינדיקציה נכונה.
  • כל טופס מצריך ניגודיות צבעים נגישה וברורה. אסור שטפסים יהיו עם רקע של תמונה, אשר יכול להקשות על המשתמש למלא את הטופס.
  • כאשר לוחצים על מילוי שדה טופס – חובה שיהיה פוקוס ברור שמציין שהשדה הנבחר כעת ניתן למילוי.

דרך לסימון שדה במצב focus:

input:focus:not([type="button"]):not([type="submit"]) { border-width: 2px; border-style: solid; /*or dashed */ border-color: aqua; }

או לחילופין:

input:focus:not([type="button"]):not([type="submit"]) { border: 2px solid aqua; }

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

שמירת לוגים של מילוי טופס אלמנטור

נכון לגרסת אלמנטור פרו 3.2, ישנו feature חדש של שמירת form submissions. הפיצ'ר החדש נחמד, אם הטופס שלכם פשוט למדי, והוא כבר מופעל אוטומטית באתרים חדשים בגרסאות מתקדמות יותר של אלמנטור פרו.
אך ברגע שיש שלבים בטופס והתניות לוגיות, הטפסים לא נשמרים בכלל בלוג של התוסף. 

אפשרות שאני ממליץ עליה לכל מי שחשוב לו לא לפספס מילוי של טפסים, היא להשתמש בתוסף Lenix פרי פיתוחו של יונתן פריימן.
התוסף לא עודכן מעל שנתיים, אך הוא עדיין עובד ובטוח לשימוש. שאלתי את יוני! 

דרכים למניעת ספאם בטפסי אלמנטור

ישנם מספר מנגנונים שניתן להפעיל על מנת לחסוך מחיינו ומתיבת המייל שלנו ספאם לא נחוץ (נסיכים הונגריים, אריק ג'ונסון כפרעליו, איומים על דומיין, קריפטו, נדל"ן ושוק ההון. האם כיסיתי הכל?)

  1. הדרך הפשוטה: הפעלת שדה מלכודת דבש לכל טופס באלמנטור.
    טיפ של אלופים: ב-field id תתנו את השדה message.
    בוטים למדו לעקוף את מלכודת הדבש, למרות זאת אני עדיין משתמש במלכודת דבש לכל טופס שאני יוצר באלמנטור.

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

2. הגדרת Recaptcha V3 – עולם הריקאפצ'ה השתדרג המון מאז שיצא לעולם ב-2007.

משמעות ה-CAPTCHA = Completely Automated Public Turing test to tell Computers and Humans Apart. 

מאז, גוגל אפילו קנתה את קאפצ'ה ושידרגה אותו. היום אנחנו עובדים עם גרסת 3. למרות שאפשר עדיין להפעיל את גרסה 2.

איך להגדיר ריקאפצ'ה ולהתממשק עם אלמנטור?

  1. https://www.google.com/recaptcha/admin/create
  2. מזינים לייבל של שם הדומיין
  3. בוחרים ב-type v3
  4. מעתיקים את הדומיין שוב (ללא HTTP)
  5. מוודאים שיש גישה לריקאפצ'ה למייל שלכם ולמייל של הלקוח
  6. מאשרים את תנאי השימוש
  7. אופציונלי: שליחת התראות לאדמינים
  8. לאחר מכן נעבור למסך עם שני קודים: Site Key & Secret Key
  9. נעתיק את שני הקודים ונשמור אותם בצד. 
  10. באתר שלנו, בלוח הבקרה, נעבור לאלמנטור > הגדרות > טאב "אינטגרציות" > נעתיק בהתאם את מפתח האתר (Site Key) ומפתח סודי (Secret Key).
    בסף ציון ניתן להשאיר ברירת מחדל 0.5 אך אם אתם חווים המון ספאם, ניתן להעלות את הסף ציון ל-0.8 או 0.9. 
  11. לא לשכוח ללחוץ על שמירת השינויים וניקוי מטמון (תמיד מנקים מטמון גם כשרק "מסתכלים על לוח הבקרה"..)
  12. נעבור לטופס אלמנטור הרצוי שלנו: בהוספת שדה נוסף, נבחר באופציה של Recaptcha V3. (שימו לב שגם כאן אנחנו נרצה לתת תווית של ריקאפצ'ה)
  13. מבחינת מיקום התווית, ניתן להחליט אם נרצה את התווית במצב inline בטופס או במצב דביק בעמוד בצד ימין או שמאל כמו אייקון.

מצרף סרטון ששגיא גליקסמן צילם, שמראה בצורה ויזואלית איך להגדיר את ריקאפצ'ה של גוגל לטפסי אלמנטור

"אבל אליק, הריקאפצ'ה לא נראית יפה inline בתוך השורה  ואני לא רוצה אותה דביקה לכל אורך העמוד"

האם אפשר להסתיר את הריקאפצ'ה של גוגל?

את הריקאפצ'ה של גוגל אפשר להסתיר, בעזרת CSS שגוגל עצמה מספקת, אך חובה להוסיף שדה HTML עם המלל הבא:

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

ה-CSS שגוגל מספקת הינו: 

.grecaptcha-badge { visibility: hidden; }

ניתן לראות את התשובה של גוגל בלינק הזה

דרך נוספת למניעת ספאם לטפסי אלמנטור היא שימוש בתוסף Maspik

התוסף Maspik הינו בגדר חובה בשימוש עם כל טופס אלמנטור. 

Maspik מאפשרת לחסום טפסי אלמנטור על פי כמות הלינקים שיש בשדה אזור טקסט, בנוסף ניתן לחסום על ידי מיילים ספציפיים או סיומות (כמו .XYZ), מדינות, IP, מילות מפתח מסוימות (כמו ביטקוין) ועוד דרכים נוספות.מפתח התוסף, יוני פריימן, כתב על התוסף באתר של אלמנטור ישראל בפוסט ניתן להכיר את כל האופציות שיש לתוסף להציע. התוסף חינמי לשימוש, אך ה-API של התוסף הינו בתשלום. (שווה את זה!)

ה-API של התוסף Maspik

ה-API מאפשר לשמור על רשימה אחת של הגדרות התוסף, ולשרשר אותה בקלות בין כל האתרים שבאחריותנו. 

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

הרשימה של ההגדרות ניתנת לשינוי רק על ידי מי שפרסם את הפוסט טייפ (Post type), אך ניתנת לשימוש על ידי כל מי שחפץ בה. 

מצרף את הרשימה שלי של הגדרות התוסף "מספיק".

הרשימה מתעדכנת בכל פעם שמישהו מצליח "להשתחל לשליחת הטופס" 

בינתיים מתוך מעל 4000 מיילים, קיבלתי 5 פעמים ספאם. 

*שימו לב שאתם לא חוסמים מילות מפתח חשובות לעסק שלכם או בטעות כל מייל אפשרי של ג'ימייל.

נחסמו 2454 הודעות ספאם עד כה
נחסמו 2454 הודעות ספאם עד כה
נחסמו 220 הודעות ספאם עד כה
נחסמו 220 הודעות ספאם עד כה
נחסמו 468 הודעות ספאם עד כה
נחסמו 468 הודעות ספאם עד כה
נחסמו 345 הודעות ספאם עד כה
נחסמו 345 הודעות ספאם עד כה

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

כתבתי פוסט מפורט יותר על התוסף WP Maspik – לקריאה "איך למנוע ספאם בטפסי וורדפרס"
אם אתם משתמשים בתוסף החינמי של Maspik, ממליץ לכם לבדוק את רשימת מילות המפתח שיש אצלי ברשימה ולהשתמש במה שמתאים לפרויקט שלכם!

איך לעשות הפניה לדף ספציפי בטפסי אלמנטור על פי בחירה בשדה מסוג Select

צורך שעולה וחוזר לפרויקטים של בניית אתרים הוא לתת הפניה מותאמת אישית לדף תודה ספציפי על פי הבחירה של משתמש הקצה

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

כותרת | ערך

הערך שנקבל – נמשוך אותו בשורטקוד דרך FIELD ID אל האזור של הפניית URL, נחבר את ה-URL המלא שלנו + השורטקוד של FIELD ID ונקבל הפניה מלאה מותנית בערך הבחירה של השדה מסוג Select.

צילמתי סרטון קצר שמתאר איך להגדיר את שדה ה-Select ואת שדה הפניית URL:

תודה למיכאל אלחייאני שהאיר את עיניי עם הפיצ'ר הזה!

איך להגדיר אימייל שונה לקבלת טופס אלמנטור כתלות בבחירה מסוימת?

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

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

שינוי שדה בחירה (Select) לשדה בחירה מסוג Select2

שדות בחירה יכולים להיות לפעמים ארוכים מידי בשביל להציג במקום אחד (לדוגמה רשימה של מדינות או ערים)

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

מצורף מדריך באנגלית איך ליצור שדה בחירה מסוג Select2 (בעזרת JS)

מצרף את הקוד שצריך להעתיק (כמובן CSS מצריך התאמה!)

CSS:

.select2-container--default .select2-selection--single{ padding: 10px; height: unset; color: var( --e-global-color-text ); border-style: solid; border-width: 0px 0px 1px 0px; border-color: var( --e-global-color-text ); border-radius: 0px 0px 0px 0px; }

Javascript:

;(w => { w.addEventListener('DOMContentLoaded', ()=>{ const $ = jQuery; const selector = '.make-select2 select, #form-field-form_select';$(selector).select2(); });})(window);

PHP:

/* Enqueue Select2 libraries */ add_action('wp_enqueue_scripts', function(){ wp_enqueue_style('wpg-select2', '//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css'); wp_enqueue_script('wpg-select2', '//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js',['jquery']); });

כמובן שנצטרך לעשות התאמה לשפה העברית בעזרת CSS:

.YourClassName { Direction: rtl !important; Bdo: rtl; Text-align: right; Text-direction: right; Unicode-bidi: bidi-override; }

נלקח במקור מהאתר Wpget.au, תודה לשמעון סביר ששלח את המדריך!

פעולות לאחר מילוי טופס: שרשור POST לדף תודה רבה

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

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

* שימו לב שדף התודה שלכם אינו מאונדקס בגוגל

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

כאן יש סרטון באנגלית שמסביר בצורה פשוטה איך להגדיר שרשור פרמטרים לדף תודה:

*שימו לב ששרשור פרמטרים בעזרת POST חייבת להיות רק עם שדות  במצב שדות חובה

עיצוב דף תודה מותנה בחוויית משתמש

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

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

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

דף תודה עם שרשור שם פרטי - אליק
דף תודה עם שרשור שם פרטי – אליק
דף תודה גנרי ללא שרשור פרמטרים
דף תודה גנרי ללא שרשור פרמטרים

אי-מיילים לאחר מילוי טופס אלמנטור

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

אימייל 1 & אופציה לאימייל 2

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

עיצוב אימייל בעזרת HTML

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

דוגמה למייל מותאם אישית בעזרת <abbr>HTML</abbr>
דוגמה למייל מותאם אישית בעזרת HTML

לא נשכח גם את אימייל 2 – שבגדול נועד ליידע את הלקוח מהצד השני שהפנייה שלו התקבלה בהצלחה. 

דוגמה למייל אישור שהטופס נשלח בהצלחה
דוגמה למייל אישור שהטופס נשלח בהצלחה

פלטפורמות לעיצוב מיילים בעזרת HTML: 

עיצוב אימייל בעזרת התוסף Elemailer

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

התוסף Elemailer מאפשר בדיוק את זה – יצירת תבניות אימיילים עם אלמנטור בממשק של אלמנטור. 

הגרסה החינמית של התוסף מאפשרת:

  • ממשק Drag & Drop של אלמנטור ליצירת תבנית אימייל
  • תבניות מיילים לטפסי אלמנטור
  • מספר ווידג'טים מותאמים אישית לאימיילים
  • אפשרות ליצירת 3 תבניות שונות של אימיילים
  • עובד עם כל SMTP
  • התממשקות לתוסף CF7

הגרסה בתשלום מאפשרת בנוסף את הפיצ'רים הבאים:

  • אימייל מרקטינג
  • מודול לשמירת Subscribers
  • תזמון מיילים
  • מעקב אחרי מיילים (פתיחה, הקלקה)
  • אופציה להסרה מדיוור
  • התממשקות לתוספי טפסים בוורדפרס נוספים
  • ווידג'טים דינמיים
  • תמיכה במיילים של Woocommerce

שליחת מסמכים במייל שצורפו בטופס אלמנטור

למי שיש טופס אלמנטור עם ווידג'ט שמאפשר העלאת קבצים, כנראה מכיר שמקבלים רק את הלינק לקובץ המדיה בספריה. לנוחיותכם, דניאל גבאי הביא לידיעתינו פוסט שדבור וסלנוביץ' כתב, שמפרסם קוד לשליחת קבצים שהועלו בטופס אלמנטור כקובץ מצורף במייל. את הקוד המצורף יש להוסיף ל- functions.php בתבנית בת או בתוסף סניפטים. אופציה ראשונה לקוד:

/*** Class Elementor_Form_Email_Attachments * * Send Elementor Form upload field as attachments to email ***/ class Elementor_Form_Email_Attachments { public $attachments_array = []; public function __construct() { add_action( 'elementor_pro/forms/process', [ $this, 'init_form_email_attachments' ], 11, 2 ); } /** * @param \ElementorPro\Modules\Forms\Classes\Form_Record $record * @param \ElementorPro\Modules\Forms\Classes\Ajax_Handler $ajax_handler */ public function init_form_email_attachments( $record, $ajax_handler ) { // check if we have attachments $files = $record->get( 'files' ); if ( empty( $files ) ) { return; } // Store attachment in local var foreach ( $files as $id => $files_array ) { $this->attachments_array[] = $files_array['path'][0]; } // if local var has attachments setup filter hook if ( 0 < count( $this->attachments_array ) ) { add_filter( 'wp_mail', [ $this, 'wp_mail' ] ); add_action( 'elementor_pro/forms/new_record', [ $this, 'remove_wp_mail_filter' ], 5 ); } } public function remove_wp_mail_filter() { $this->attachments_array = []; remove_filter( 'wp_mail', [ $this, 'wp_mail' ] ); } public function wp_mail( $args ) { $args['attachments'] = $this->attachments_array; return $args; } } new Elementor_Form_Email_Attachments();

הסרת קובץ מדיה מספריית מדיה שהועלה מטופס אלמנטור

במידה ואתם צריכים להסיר את קובץ המדיה שהועלה, לאחר שליחתו במייל, מצורפת האופציה השניה:

שימו לב: הקוד דומה לקוד הקודם, רק אם אופציה להסרת הקובץ מספריית המדיה לאחר שליחתו במייל

/** * Class Elementor_Form_Email_Attachments * * Send Elementor Form upload field as attachments to email */ class Elementor_Form_Email_Attachments { // Set to true if you want the files to be removed from // the server after they are sent by email const DELETE_ATTACHMENT_FROM_SERVER = false; public $attachments_array = []; public function __construct() { add_action( 'elementor_pro/forms/process', [ $this, 'init_form_email_attachments' ], 11, 2 ); } /** * @param \ElementorPro\Modules\Forms\Classes\Form_Record $record * @param \ElementorPro\Modules\Forms\Classes\Ajax_Handler $ajax_handler */ public function init_form_email_attachments( $record, $ajax_handler ) { // check if we have attachments $files = $record->get( 'files' ); if ( empty( $files ) ) { return; } // Store attachment in local var foreach ( $files as $id => $files_array ) { $this->attachments_array[] = $files_array['path'][0]; } // if local var has attachments setup filter hook if ( 0 < count( $this->attachments_array ) ) { add_filter( 'wp_mail', [ $this, 'wp_mail' ] ); add_action( 'elementor_pro/forms/new_record', [ $this, 'remove_wp_mail_filter' ], 5 ); } } public function remove_wp_mail_filter() { if ( self::DELETE_ATTACHMENT_FROM_SERVER ) { foreach ( $this->attachments_array as $uploaded_file ) { unlink( $uploaded_file ); } } $this->attachments_array = []; remove_filter( 'wp_mail', [ $this, 'wp_mail' ] ); } public function wp_mail( $args ) { $args['attachments'] = $this->attachments_array; return $args; } } new Elementor_Form_Email_Attachments();

שימו לב לשורת קוד: const DELETE_ATTACHMENT_FROM_SERVER = false;

אם אתם רוצים להסיר את הקובץ לאחר שליחתו במייל, יש לשנות את ה-false ל-true

פעולות מתקדמות בטופס יצירת קשר מאת עופר זיו

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

בסרטון עופר מדבר על הגדרות בסיסיות לטופס, יצירת מסננים בג'ימייל, הפניית URL לעמוד תודה, העברת פרמטרים נוספים ועיצוב מייל באמצעות HTML ו-CSS

בפוסט שעופר כתב בבלוג, תוכלו להשתמש בקוד שהוא הראה בסרטון.

האם ניתן לשרשר GET לטופס (מילוי שדות מראש?)

כן, זה אפשרי. בטפסי אלמנטור יש אופציה לשרשור POST וגם לשרשור GET

שתי הפעולות קורות בעזרת ה-FIELD ID ושרשור הפרמטר ב- URL כפי שראינו בסרטון של עופר.

בשביל לשרשר GET – נגיע לשדה הרצוי שלנו

  1. נעבור למתקדם
  2. ב-ID נשים את השם  שאנחנו רוצים לזכור (נניח  לשדה אימייל = email).
    חשוב לזכור שאסורים רווחים
  3. ערך ברירת מחדל: נבחר בתגיות דינאמיות
  4. נבחר בפרמטר בקשה
    נלחץ על האייקון של המפתח השוודי
  5. סוג GET, שם פרמטר – עדיפות לאותו השם של ה-ID

זהו

עכשיו אתם יכולים לשלוח לינק לעמוד או אפילו לאזור הרצוי בעזרת #, ובעזרת ה- (?) נשרשר את ה-ID עם הערך שלו.

דוגמה:

https://alikz.co.il/wordpress/elementor-forms-a-to-z/?email=carrots@gmail.com
הלינק ימלא את טופס ההרשמה לדיוור עם המייל carrots@gmail.com

מעקב UTM – איך לשרשר את המידע של ה-UTM לתוך טפסי אלמנטור? (גם אם זה לא העמוד הראשון של המבקר)

אייל גרשון שיתף קוד והדרכה מפורטת איך להוסיף מקורות תנועה ממשתני UTM לתוך שדות של טופס אלמנטור

נעשה שימוש ב- Local Storage.  הסרטון כאן:

אם נוח לכם יותר לקרוא את ההדרכה, אייל כתב הדרכה מפורטת באתר של Wisy

להעתקת הקוד להטמעה מגיטהאב

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

הדרך היעילה להגדרת מעקב המרות מסוג Form Submit (דרך גוגל תג מנג'ר)

הדרך היעילה ביותר להגדרת מעקב המרות של מילוי טפסים, בעזרת גוגל תג מנג'ר עם Form Submission Trigger & Element Visibility Trigger ואפילו בעזרת Jquery. אלעד לוי כתב בבלוג שלו בצורה מפורטת את כל הדרכים

ספוילר: ה-CSS Selector שצריך להגדיר הוא: .elementor-message.elementor-message-success

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

אימיילים מטופס אלמנטור לא מגיעים?

לאחר שבדקנו ווידאנו שאין שגיאות כתיב בכתובות של המיילים שלנו, הדבר הבא שנרצה לוודא זה את ה-SMTP שלנו. 

לפעמים הבעיה יכולה להיפתר על ידי התקנת תוסף SMTP כמו WP-SMTP או התוסף Post SMTP שנקנה לא מזמן על ידי חברת פיתוח מהמפתח הישראלי – יהודה חסין.

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

עיצוב הודעות שגיאה בטפסי אלמנטור

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

חיבור טופס אלמנטור לגוגל שיטס ללא תוכנת ביניים

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

שימו לב שזה מצריך שימוש בשדה וובהוק.

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

אופציות נוספות הן להשתמש בכלים צד שלישי:

האם ניתן להוסיף יותר מוובהוק אחד לטפסי אלמנטור?

עם כל דרכי ההתממשקות שיש לאלמנטור בעזרת וובהוקים, לפעמים אנחנו נצטרך גישה לעוד וובהוק אחד.
למרות שעדיף להעביר את הכל דרך וובהוק אחד ומשם לפצל לאוטומציות השונות.
מצרף כאן את הפוסט שקורי כתב באנגלית על יצירת וובהוק מספר 2 (מצריך הוספת קוד ב-functions.php או בתוסף סניפטים)
לשימושכם.

יצירת אפקט לייבלים מרחפים לטפסי אלמנטור:

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

בפוסט הבא ניתן להעתיק את הקוד Javascript & CSS

שימו לב, אם הטופס שלכם בעברית, תצטרכו לשנות ב-CSS את left:15px; ל- right:15px;

הוספת אייקונים לשדות בטפסי אלמנטור

אוריאל סוטו העלה סרטון ביוטיוב שמסביר איך להוסיף ולהתאים את האייקונים של אלמנטור בסרטון מפורט:

בפוסט שלו ניתן להעתיק את ה-CSS שהוא כתב. אישית אני לא בעד להשתמש בספרייה של Font Awesome מכיוון שזו ספרייה שטוענת כ-3000 אייקונים גם אם אנחנו משתמשים רק באייקון אחד. הדבר מאפשר לחסוך בקשות טעינה מיותרות מהדף, ולחסוך כ-150 kb מטעינת העמוד.
אני ממליץ להשתמש באייקונים מותאמים אישית שלכם, דבר המצריך ידע ב-CSS וב- font-family: "Your Own Icon Family" עם התוכן המותאם פר אייקון: content:"\f007"; .

מניעת גלילה צדדית במובייל לטפסים מרובי שלבים באלמנטור

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

במובייל, ברגע שהשלבים הם יותר מ-3, ה- display: flex מייצר גלילה צדדית לציר האנכי לכל הדף (לצערי לא רק לאלמנט)

למזלנו ניתן לפתור את זה בעזרת CSS שכתבתי:

/* fix flex basis & wrap on FORMS STEPS to "inline" in mobile */ @media (max-width: 767px) { .e-form__indicators { display:flex; display: -ms-flexbox; flex-wrap: wrap; -ms-flex-wrap: wrap; }.e-form__indicators>* { flex-basis: min-content; inline-size: auto; } }

סיכום

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

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

שתפו את הפוסט:

פייסבוק
וואטסאפ
לינקדאין
אי-מייל
מעוניינים לקבל עדכונים על פוסטים שאני כותב במייל? >>
תמונה של אליק זמליאנקין

אליק זמליאנקין

אוהב אוטומציות ולהתייעל, מתעסק ב-PPC ו- SEO, לפעמים בונה אתרים בעזרת אלמנטור, נהנה ללמוד דברים חדשים בדיגיטל.

איך להעלות סרטון ביוטיוב – צ'ק ליסט מלא (vSEO)

אליק זמליאנקין 10/03/2024

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

לקריאת הפוסט

12 תגובות

  1. היי אליק. תודה ענקית על הפוסט המושקע הזה. עזרת לי הרבה מאוד!
    האם יש אפשרות שבעת לחיצה על שלב "הבא" ישלחו הנתונים שהמשתמש מילא בשלב הנוכחי – על ידי וובהוק?

    הגב

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

      הגב

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

    הגב

    1. היי חיים, מקווה שהפוסט עזר לך.

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

      יש תוסף בשם Dynamic ooo שיש לו פיצ'ר של הוספת Unique ID לכל טופס אלמנטור מצרף לינק לווידג'ט: https://www.dynamic.ooo/widget/unique-id-elementor-pro-form/

      ניתן להגיע לאותן תוצאות בעזרת תוספי טפסים אחרים כמו Gravity Forms.

      הגב

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

    הגב

    1. היי מוטי, תודה רבה!
      לטפסים של אלמנטור פרו אין אופציה מובנת לתת מגבלה של כמות טפסים שמולאו. מבדיקה זריזה באינטרנט מצאתי את הפוסט הבא שיכול לתת את התשובה (מצריך ידע ב-PHP). לינק: https://itchycode.com/how-to-restrict-maximum-submission-in-elementor-pro-form/

      אם יש עניין אוכל לבדוק עם כותב הפוסט אם יהיה אפשר לתרגם את הפוסט שלו לעברית

      אופציות שניה תהיה שימוש בתוסף Dynamic.ooo שיש בו את האופציה להגביל כמות של מילוי טפסים כולל נעילה: https://help.dynamic.ooo/en/articles/5930457-how-to-limit-the-number-of-elementor-form-submissions

      אופציה שלישית תהיה שימוש בתוסף טפסים שונה מאלמנטור, כמו לדוגמה Fluent Forms.

      הגב

  4. הי אליק,
    הצ'קבוקסים והרדיו של הטופס הקלאסי של אלמנטור לא נראים טוב.
    האם מכיר איזה קוד CSS שאפשר להוסיף? לא מצאתי משהו שמתאים לעברית

    הגב

    1. היי דניאל!
      אני מסכים איתך שהשדות צ'קבוקס & שדות הרדיו של אלמנטור הם מאוד דיפולטביים. אוכל להוסיף סקשן על זה בהמשך, נכון לכרגע אני מציע להתחיל עם הפוסט + וידאו הבא: https://designtheway.com/style-elementor-form/
      בגדול, כל CSS שפונה לעיצוב הצ'קבוקס ורדיו מסתיר את המקורי ו"יוצר חדש" בעזרת CSS.
      אחרי שתראה את הסרטון ואת הקוד שהוא מצרף בפוסט אני מציע לחפש ב-Codepen עיצובים נהדרים של רק CSS לשדות צ'קבוקס & שדות רדיו.

      הגב

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

    אני מחפש דרך למלא את המייל בתוכן דינמי לפי איזה DB חיצוני שאצור איפושהו בWP או אלמנטור.
    רעיונות?

    הגב

    1. היי נתנאל
      על פי איזו התניה ישלח הטופס לספק הנכון? על פי בחירת המשתמש?
      במידה וזה בבחירת משתמש – אז שדה מסוג בחירה עם ערכים יתן לך את התשובה

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

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

      אופציה נוספת היא להשתמש באוטומציה כמו Make או זאפייר או אפילו איירטייבל – הטפסים נשלחים נניח לאקסל או איירטייבל – משם אפשר ליצור התניה על פי מילת מפתח שישלח המייל המותאם לספק המתאים בתוך האוטומציות של איירטייבל או בשימוש באוטומציה במייק 🙂

      מקווה שעזרתי!

      הגב

  6. היי אליק
    בהמשך להתכתבות ביוטיוב לגבי הבאג במשיכת utm's מעמוד פנימי
    תודה רבה על העזרה
    יוסף

    הגב

כתיבת תגובה

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

דילוג לתוכן