מגזין וורדפרס אתרים – בקלות ובעברית – WP-Atarim עדכונים, טיפים, חדשות, שירותים ועזרה בוורדפרס
טפסי אלמנטור מא’ עד ת’
נכתב במקור ע”י אליק זמליאנקין בפייסבוק – הקישור כאן
אין ספק שווידג’ט הטפסים של אלמנטור פרו הביא המון שינויים ושדרוגים לאלמנטור, כאשר הופיע לראשונה. עדיין יש בו לא מעט חסרונות בהשוואה לתוספי טפסים לוורדפרס, אך בפוסט היום ארצה להתמקד באיך לשדרג את טפסי האלמנטור שלנו, עם דוגמאות ממקורות מידע שונים.
שדות רגילים, שדות HTML, אופציות לשדות הקיימים
מתחילים מהבסיס, וידג’ט הטופס של אלמנטור מאפשר את האופציה למבקר באתר להשאיר פרטים (“ליד”) על מנת שנוכל ליצור עימו קשר, בין עם זה דרך אימייל, מספר טלפון, או כל פעולה מוגדרת אחרת. הרשמות לרשימות דיוור, ניוזלטרים, טפסי הרשמה וטפסי התחברות, מייל אישור ומייל HTML רגיל – ניתן לבנות ולעשות דרך טופס אלמנטור.
האפשרויות שיש בשדות טופס של אלמנטור הן:
האפשרויות שיש בשדות טופס של אלמנטור הן:
-
טקסט
-
אימייל
-
כתובת URL
-
טלפון
-
אפשרויות בחירה
-
בחירה
-
תיבת סימון
-
הסכמה
-
מספר
-
תאריך
-
זמן
-
העלאת קבצים
-
סיסמה
-
HTML
-
מוסתר
-
recaptcha
-
recaptcha v3
-
מלכודת דבש
-
שלב
כל שדה מגיע עם ולידציה מובנית. לדוגמה, אימייל שהוזן ללא @, לא יתן לשלוח את הטופס.
שדה URL שלא הוזן בו לינק עם קידומת https, לא יתקבל.
כל שדה ניתן להפוך לשדה חובה, שללא מילוי של השדה, לא נשלח הטופס.
ניתן להפוך את הטופס גם לטופס רב שלבי על ידי הוספת שדה “שלב” ולהפריד שדות של טפסים לשלבים לנוחיות המשתמש – על מנת לא להעמיס על משתמש הקצה המון שדות ולגרום לנטישת מילוי טופס עקב ריבוי שדות למילוי.
על עולמם של השדות המוסתרים של טפסי אלמנטור אפרט בהמשך הפוסט.
שדה URL שלא הוזן בו לינק עם קידומת https, לא יתקבל.
כל שדה ניתן להפוך לשדה חובה, שללא מילוי של השדה, לא נשלח הטופס.
ניתן להפוך את הטופס גם לטופס רב שלבי על ידי הוספת שדה “שלב” ולהפריד שדות של טפסים לשלבים לנוחיות המשתמש – על מנת לא להעמיס על משתמש הקצה המון שדות ולגרום לנטישת מילוי טופס עקב ריבוי שדות למילוי.
על עולמם של השדות המוסתרים של טפסי אלמנטור אפרט בהמשך הפוסט.
נגישות, פוקוס שדות וחסרונות הטופס
נגישות טפסי אלמנטור הינו נושא שמצריך פוסט נפרד. אולי בעתיד אכתוב על זה בעזרת אנשים מומחים לנגישות, אם תרצו.
יש מספר דברים שאנחנו חייבים ל ולהתאים נגישות בעת מילוי טפסים באינטרנט, על מנת שגם אנשים בעלי מוגבלויות יוכלו להשלים ולשלוח את הטופס, בין אם הם מעוניינים לקבל מידע נוסף על השירות שלכם, להירשם לניוזלטר שלכם או לשלם לכם.
יש מספר דברים שאנחנו חייבים ל ולהתאים נגישות בעת מילוי טפסים באינטרנט, על מנת שגם אנשים בעלי מוגבלויות יוכלו להשלים ולשלוח את הטופס, בין אם הם מעוניינים לקבל מידע נוסף על השירות שלכם, להירשם לניוזלטר שלכם או לשלם לכם.
״על רגל אחת”:
-
חובה תיאור לשדות label מותאם לכל שדה טופס – חובה שיהיה Label מותאם ותיאור מותאם. שדה אימייל חייב להיות עם input=email, שיש בו לייבל שלא נעלם בעת הקלדה (Label ולא Placeholder!)
-
ה-Placeholder חייב לתת אינדיקציה לפורמט של מילוי שדה בצורה נכונה, לדוגמה: [email protected]
-
סימון שדות חובה – ויזואלית ע”י סימן כוכבית + קוד: כל שדה חובה חייב להיות עם סממן ויזואלי שהינו במצב חובה. לדוגמה סימון כוכבית (*) או המילים: שדה חובה. גם ברמת הקוד חייבת להיות אינדיקציה של שדה חובה, למזלנו אלמנטור מטפל בזה בצורה נכונה ברגע שמעבירים את השדה למצב חובה.
-
כל טופס מצריך הסבר משמעות סימן (*) לפני טופס. ניתן להוסיף על ידי שדה HTML עם טקסט לפני כל טופס.
-
סימון שגיאות ותיאור שגיאות בצורה ברורה ובשפה של האתר – לצערנו כאן אלמנטור לא תמיד נותן אינדיקציה נכונה.
-
כל טופס מצריך ניגודיות צבעים נגישה וברורה. אסור שטפסים יהיו עם רקע של תמונה, אשר יכול להקשות על המשתמש למלא את הטופס.
-
כאשר לוחצים על מילוי שדה טופס – חובה שיהיה פוקוס ברור שמציין שהשדה הנבחר כעת ניתן למילוי.
שמירת לוגים של מילוי טופס אלמנטור
נכון לגרסת אלמנטור פרו 3.2, ישנו feature חדש של שמירת form submissions. הפיצ’ר החדש נחמד, אם הטופס שלכם פשוט למדי, והוא כבר מופעל אוטומטית באתרים חדשים בגרסאות מתקדמות יותר של אלמנטור פרו.
אך ברגע שיש שלבים בטופס והתניות לוגיות, הטפסים לא נשמרים בכלל בלוג של התוסף.
אך ברגע שיש שלבים בטופס והתניות לוגיות, הטפסים לא נשמרים בכלל בלוג של התוסף.
אפשרות שאני ממליץ עליה לכל מי שחשוב לו לא לפספס מילוי של טפסים, היא להשתמש בתוסף Lenix פרי פיתוחו של יונתן פריימן.
התוסף לא עודכן מעל שנתיים, אך הוא עדיין עובד ובטוח לשימוש. שאלתי את יוני!
התוסף לא עודכן מעל שנתיים, אך הוא עדיין עובד ובטוח לשימוש. שאלתי את יוני!
דרכים למניעת ספאם בטפסי אלמנטור
ישנם מספר מנגנונים שניתן להפעיל על מנת לחסוך מחיינו ומתיבת המייל שלנו ספאם לא נחוץ (נסיכים הונגריים, אריק ג’ונסון כפרעליו, איומים על דומיין, קריפטו, נדל”ן ושוק ההון. האם כיסיתי הכל?)
-
הדרך הפשוטה: הפעלת שדה מלכודת דבש לכל טופס באלמנטור.
טיפ של אלופים: ב-field id תתנו את השדה message.
בוטים למדו לעקוף את מלכודת הדבש, למרות זאת אני עדיין משתמש במלכודת דבש לכל טופס שאני יוצר באלמנטור.
אגב, האם הטפסים שלכם הם טפסים גלובליים? אם לא, לא חבל? לפעמים הגדרה אחת של טופס גלובלי יכולה לחסוך לנו שעות עבודה על עשרות טפסים.
2. הגדרת Recaptcha V3 – עולם הריקאפצ’ה השתדרג המון מאז שיצא לעולם ב-2007.
משמעות ה-CAPTCHA = Completely Automated Public Turing test to tell Computers and Humans Apart.
מאז, גוגל אפילו קנתה את קאפצ’ה ושידרגה אותו. היום אנחנו עובדים עם גרסת 3. למרות שאפשר עדיין להפעיל את גרסה 2.
דרך נוספת למניעת ספאם לטפסי אלמנטור היא שימוש בתוסף MASPIK
התוסף Maspik הינו בגדר חובה בשימוש עם כל טופס אלמנטור.
Maspik מאפשרת לחסום טפסי אלמנטור על פי כמות הלינקים שיש בשדה אזור טקסט, בנוסף ניתן לחסום על ידי מיילים ספציפיים או סיומות (כמו .XYZ), מדינות, IP, מילות מפתח מסוימות (כמו ביטקוין) ועוד דרכים נוספות.מפתח התוסף, יוני פריימן, כתב על התוסף באתר של אלמנטור ישראל בפוסט ניתן להכיר את כל האופציות שיש לתוסף להציע. התוסף חינמי לשימוש, אך ה-API של התוסף הינו בתשלום. (שווה את זה!)
בתוסף ישנו ספאם לוג שבו ניתן לעקוב אחרי הטפסים שלא נשלחו, מה הסיבות שלא נשלחו, וכמובן אפשרות לאפס את הלוג.
אם אתם משתמשים בתוסף החינמי של maspik, ממליץ לכם לבדוק את רשימת מילות המפתח שיש אצלי ברשימה ולהשתמש במה שמתאים לפרויקט שלכם!
אם אתם משתמשים בתוסף החינמי של maspik, ממליץ לכם לבדוק את רשימת מילות המפתח שיש אצלי ברשימה ולהשתמש במה שמתאים לפרויקט שלכם!
פעולות לאחר מילוי טופס: שרשור POST לדף תודה רבה
ישנן מספר פעולות לאחר שליחת הטופס שניתן להגדיר: וובהוקים, שליחת אימיילים, מעבר לדף אחר ועוד.
ברוב הפעמים אנחנו נחבר אימייל עם כל השדות של הטופס ונחבר “דף תודה רבה” על מילוי הטופס. לאנשי שיווק, דף תודה לאחר מילוי טופס, מהווה טריגר לשליחת איוונט מסוג “ליד” בפיקסל של פייסבוק ובגוגל אנליטיקס, מכיוון שאוטומטית לאחר מילוי הטופס מועברים לדף תודה.
* שימו לב שדף התודה שלכם אינו מאונדקס בגוגל
במקרה הקלאסי ביותר, נרצה לשרשר את השם של מי שמילא את הטופס לדף תודה, על מנת שמשתמש הקצה ירגיש שהחוויה היא אישית.
*שימו לב ששרשור פרמטרים בעזרת POST חייבת להיות רק עם שדות במצב שדות חובה
עיצוב דף תודה מותנה בחוויית משתמש
לעמוד “דף תודה” ישנה חשיבות גבוהה בחוויית המשתמש, לפעמים הוא מסמל את סיום הגלישה באתר, אך לא בהכרח. נוכל להכווין את הגולש באתר לחוויה שתגרום לו לא לעזוב את האתר או את הנכסים הדיגיטליים של העסק.
נוכל להשקיע בקריאה לפעולה חדשה של צפיה בוידאו מסקרן או מלמד, או לפי מטרת השיווק שלנו, להחליט האם הדבר הנכון לעשות בדף תודה זה אופציה ל- up-sale למוצר או שירות שאנחנו מציעים.
דרך נוספת יכולה להיות הצעה למשתמש להמשיך לצרוך תוכן נוסף שיש לנו להציע – בין אם זה בתצורת פוסטים, סרטונים ביוטיוב, פוסטים בסושיאל מדיה או אפילו קריאה להצטרפות לקהילה שלנו.
אי-מיילים לאחר מילוי טופס אלמנטור
ישנן מספר פעולות לאחר שליחת הטופס, שניתן להגדיר עם האימיילים שלנו.
אימייל 1 & אופציה לאימייל 2
אימייל 1 – לרוב יהיה למנהל האתר / הלקוח / האדם שאותו נרצה ליידע שנשלח טופס מהאתר שלנו.
הצורה שאלמנטור שולח את המייל בברירת מחדל היא כל שדות הטפסים, כולל הנסתרים, ועוד מידע על הIP, זמן שליחה ועוד.
עיצוב אימייל בעזרת HTML
לפעמים לא יעניינו את מקבל הטופס כל השדות, ונרצה לצמצם את הזמן שהוא יתעסק עם המייל שהתקבל. מה הכוונה?
לדוגמה, להפוך את הטלפון ואת האימייל לקליקביליים.
פלטפורמות לעיצוב מיילים בעזרת HTML:
עיצוב אימייל בעזרת התוסף ELEMAILER
לפעמים, נרצה להשקיע מעט יותר גם בנראות של המייל אותו נשלח למשתמש קצה שמילא את הטופס או לבעלים של האתר.
התוסף Elemailer מאפשר בדיוק את זה – יצירת תבניות אימיילים עם אלמנטור בממשק של אלמנטור.
הגרסה החינמית של התוסף מאפשרת:
-
ממשק Drag & Drop של אלמנטור ליצירת תבנית אימייל
-
תבניות מיילים לטפסי אלמנטור
-
מספר ווידג’טים מותאמים אישית לאימיילים
-
אפשרות ליצירת 3 תבניות שונות של אימיילים
-
עובד עם כל SMTP
-
התממשקות לתוסף CF7
הגרסה בתשלום מאפשרת בנוסף את הפיצ’רים הבאים:
-
אימייל מרקטינג
-
מודול לשמירת subscribers
-
תזמון מיילים
-
מעקב אחרי מיילים (פתיחה, הקלקה)
-
אופציה להסרה מדיוור
-
התממשקות לתוספי טפסים בוורדפרס נוספים
-
ווידג’טים דינמיים
-
תמיכה במיילים של Woocommerce
פעולות מתקדמות בטופס יצירת קשר מאת עופר זיו
בסרטון עופר מדבר על הגדרות בסיסיות לטופס, יצירת מסננים בג’ימייל, הפניית URL לעמוד תודה, העברת פרמטרים נוספים ועיצוב מייל באמצעות HTML ו-CSS
בפוסט שעופר כתב בבלוג, תוכלו להשתמש בקוד שהוא הראה בסרטון.
האם ניתן לשרשר GET לטופס (מילוי שדות מראש?)
כן, זה אפשרי. בטפסי אלמנטור יש אופציה לשרשור POST וגם לשרשור GET
שתי הפעולות קורות בעזרת ה-FIELD ID ושרשור הפרמטר ב- URL כפי שראינו בסרטון של עופר.
בשביל לשרשר GET – נגיע לשדה הרצוי שלנו
-
נעבור למתקדם
-
ב-ID נשים את השם שאנחנו רוצים לזכור (נניח לשדה אימייל = email).
-
חשוב לזכור שאסורים רווחים
-
ערך ברירת מחדל: נבחר בתגיות דינאמיות
-
נבחר בפרמטר בקשה
-
נלחץ על האייקון של המפתח השוודי
-
סוג GET, שם פרמטר – עדיפות לאותו השם של ה-ID
זהו
עכשיו אתם יכולים לשלוח לינק לעמוד או אפילו לאזור הרצוי בעזרת #, ובעזרת ה- (?) נשרשר את הID עם הערך שלו.
מעקב UTM – איך לשרשר את המידע של ה-UTM לתוך טפסי אלמנטור? (גם אם זה לא העמוד הראשון של המבקר)
נעשה שימוש ב- Local Storage.
אם נוח לכם יותר לקרוא את ההדרכה, אייל כתב הדרכה מפורטת באתר של Wisy
אם אין לכם היכרות עם UTM, שימו לב שבסוף הפוסט אחרי המידע על אייל גרשון אפשר לקבל תשובות זריזות לשאלות מה זה UTM ואיך להשתמש בו.
אימיילים מטופס אלמנטור לא מגיעים?
לאחר שבדקנו ווידאנו שאין שגיאות כתיב בכתובות של המיילים שלנו, הדבר הבא שנרצה לוודא זה את ה-SMTP שלנו.
לפעמים הבעיה יכולה להיפתר על ידי התקנת תוסף SMTP כמו WP-SMTP או התוסף Post SMTP שנקנה לא מזמן על ידי חברת פיתוח מהמפתח הישראלי – יהודה חסין.
אלחנן לבבי כתב פוסט נרחב מאוד בבלוג שלו על הבעיה והציעה פתרונות מגוונים. כל בונה אתרים בעזרת אלמנטור חייב להכיר את הפעולות (וגם את הבלוג של אלחנן..)
חיבור טופס אלמנטור לגוגל שיטס ללא תוכנת ביניים
עוד פוסט חשוב מהבלוג של אלחנן, הוא שיתף איך לחבר טופס של אלמנטור לגוגל שיטס ללא התממשקות לתוכנות צד שלישי
שימו לב שזה מצריך שימוש בוובהוק.
אם בכל מקרה תרצו להשתמש בזאפייר
אופציות נוספות הן להשתמש:
-
בחיבור עם Make (לשעבר אינטגרומט) – כאן יש הדרכה של אלעד חממי ביוטיוב
-
להשתמש בתוסף וורדפרס Uncanny Automator שמאפשר התממשקות לגוגל שיטס
האם ניתן להוסיף יותר מוובהוק אחד לטפסי אלמנטור?
עם כל דרכי ההתממשקות שיש לאלמנטור בעזרת וובהוקים, לפעמים אנחנו נצטרך גישה לעוד וובהוק אחד.
למרות שעדיף להעביר את הכל דרך וובהוק אחד ומשם לפצל לאוטומציות השונות.
מצרף כאן את הפוסט שקורי כתב באנגלית על יצירת וובהוק מספר 2 (מצריך הוספת קוד ב-functions.php או בתוסף סניפטים)
לשימושכם.
סיכום
בפוסט הזה צללנו לעומק של טפסי אלמנטור, עסקנו ב-CSS של הטפסים, בנראות שלהם, בשיפור הנגישות שלהם וגם בפעולות מתקדמות לאחר שליחת הטופס. הבנו שאנחנו חייבים להשקיע בחוויית גלישה טובה למשתמש גם לאחר שהוא מילא טופס, מכיוון שאנחנו רוצים לייצר המשכיות של המשתמש עם העסק שלנו.
מקווה שחידשתי לכם בנוגע לטפסים של אלמנטור.
