בעבר פורסם מדריך קצר על תוסף של טופס יצירת קשר בוורדפרס אך המדריך היה בסיסי מאוד. במאמר זה, נרחיב ונראה איך ביכולתנו להשתמש בטופס יצירת קשר בשם Contact Form 7 בצורה הרבה יותר מורחבת ויעילה. הרבה מבעלי אתרים שאינם מבינים את תחום של בניית אתרים או רק בתחילת דרכם של פתיחת עסק האינטרנטי, אינם מודעים לאפשרויות שעומדות בפניהם. במאמר זה, או יותר נכון במדריך זה, נלמד איך להשתמש בתוסף של טופס יצירת קשר לוורדפרס מעבר לצורך יצירת טופס הפשוט שרובם מכירים. סטודנטים אשר עברו או סיימו את קורס בניית אתרים או אלו שעשו בעבר את הקורס של שווק באינטרנט כגון " קורס אפילייט מרקטינג" או קורס קידום אתרים לא בהכרח שהם מכירים את כוחו ואת יכולתו של התוסף. באמצעות תוסף זה ניתן ליצור מערכת מלאה לניהול לידים ( הפניות ) מהאתר שלכם, לשמור ולסנן ההרשמות והפניות, לשלוח הפניות למייל ולשמור אותה גם במערכת, לייצא אותה בתור קובץ Pdf או אקסל ועוד…
איך ליצור טופס יצירת קשר בוורדפרדס ?
לפני הכל אנו צריכים לזכור שכל בעל האתר צריך לחשוב על נוחות המשתמש שזה מתבטא בשימוש קל באתר. אכן לא צריך לגרום לגולש לחשוב ולחפש איך לשלוח הודעה או פניה לבעל האתר. הרבה בעלי אתרים שמים כתובת דואר אלקטרוני (אימייל) שלהם בעמוד צור קשר, והדבר נפוץ אצל אנשים שעוסקים בגרפיקה שרק עברו הכשרה של יום או יומיים בבניית אתרים באמצעות html. (אכן זה ככה). אי אפשר להאשים אותם במשהו שזה לא התחום שלהם וזה לא תעסוקתם אבל כאשר אתה מגיעה לרגע שבו החלטת להקים אתר אינטרנט לעסק שלך, או ללקוח שפנה אליך, עליך לקחת בחשבון שתכנון נכון של הדברים יכול להיות הצלחה מסחררת עבור האתר. מעבר לזה, צריך להבין שבוטים (בשפה הפשוטה: תוכנות שרצות על מחשבים שסורקים רשת האינטרנט כדי לאסוף כתובת דואר אלקטרוני למשלוח הודעות פרסומיות – ספאם) רק מחפשים אתרים כאלה ששמו מייל בעמוד צור קשר של האתר. ולכן תמיד כדאי ומקובל להשתמש בטופס יצירת קשר במיוחד כאשר מדובר בתוסף בשם Contact Form 7 שמביא איתו פונקציונליות עשירה בשימוש בתוסף עבור משתמש הפשוט וכמובן גם עבור בעל האתר.
הערה: מדריך זה מיועד לבעלי אתרים שכבר מותקנת להם מערכת וורדפרדס בשרת.
שלב 1: איך להתקין את התוסף?
הכנס לפנל ניהול של וורדפרדס. לאחר הכניסה למערכת גש לעמודה הצדדית שנמצאת בצד ימין (בצד שמאל במידה ואתה עושה שימוש במערכת וורדפרדס באנגלית) ולחץ על כפתור בשם "תוספים". כעת נפתח עוד תפריט פנימית בתוך הכפתור של תוספים. לחץ על קישור – "להתקין תוסף חדש". הלחיצה תוביל אותך לעמוד שבו יוצג תיבת חיפוש קטנה. אנא רשום את שם התוסף יצירת קשר שעלינו להתקין במערכת – Contact Form 7. לחץ על כפתור חפש כדי להתחיל חיפוש התוסף. תוך שניות בודדות יוצגו לך רשימה של תוצאות. עליך לחפש את השורה שבו כתוב רק את שם התוסף במדויק. ז"א יש סיכוי שיוצגו לך עוד תוצאות עם אותו שם של התוסף אבל עם תוספת מילה או שניים. הקפד למצוא את השורה שכתובה בו רק את שמה המקורית כפי שזה מופיעה כאן. לחץ על "התקנה". לאחר לחיצה על כפתור התקנה, המערכת מורידה את התוסף יצירת קשר למערכת וורדפרס ומתקינה אותה בשרת. לאחר הסיום ההתקנה עליך ללחוץ על כפתור "להפעיל" כדי להדליק את התוסף. למרות שההסבר נראה אולי מסובך ננסה כעת לסדר את זה בצורה ברורה יותר באמצעות תיוג השלבים.
- הכנס פנל ניהול של וורדפרדס באמצעות שם משתמש וסיסמה
- בחר את כפתור "תוספים" בתפריט הצדדית
- לחץ יל קישור "להתקין תוסף חדש".
- הכנס את שמה של התוסף בתיבת חיפוש – Contact Form 7
- לחץ על כפתור חפש כדי לחפש את התוסף.
- בחר את התוסף עם שם המדויק בתוך תוצאות שיוצגו לך
- לחץ על כפתור "להתקין"
- לאחר התקנה, לחץ על כפתור "להפעיל".
התוסף מותקן בשרת והוא מוכן לשימוש ועריכה!
שלב 2: שימוש בתוסף יצירת קשר – Contact Form 7
בתפריט הצדדי של פנל ניהול בוורדפרס התווסף לך כפתור הגדרות חדשה בשם "צור קשר" ממש אחרי כפתור "הגדרות".
לחץ על כפתור "צור קשר" בתפריט הצדדי
הקש על קישור בשם "עריכה"
כעת מוצג בפניך פנל ניהול של התוסף יצירת קשר שמאפשרות ליצור תפסים. כעת אנחנו נגדיר את כתובת אימייל למשלוח הפניות שמגיעות לאתר ונכניס את הטופס באחד מעמודים של האתר.
מתחת אזור הגדרת הטופס נמצא אפשרות הגדרת דואר. הגדר את דואר אלקטרוני שאליו ישלחו הפניות באופן ישיר כאשר גולש ממלא את הטופס באתר. בשלב זה אין צורך לגעת בהגדרות אחרות באזור זה. מעל התוסף או יותר נכון מתחת לכותרת של הטופס נמצא כפתור בשם "שמור". תקליק על הכפתור באמצעות סימן של העכבר ושמור את ההגדרות של הטופס. בשלב זה עליך להכניס את הטופס שיצרת בעמוד כלשהו באתר. עתק את הקוד שרשום באזור "חום". את הקיצור של הטופס עליך לעתיק לעמוד שבו ברצונך להציג את הטופס. דיי פשוט, לא?
אם לא, אז נפרט את זה בשלבים לפי שלבים:
- לחץ על כפתור צור קשר בתפריט הצדדי
- הקש על קישור בשם "עריכה"
- הגדרת את כתובת מייל באזור ה- "דואר"
- לחץ על כפתור שמור בראש העמוד
- עתק את הקוד המופיע באזור שצבוע בצבע חום
- הדבק את הקוד בעמוד שבו ברצונך להציג את הטופס שיצרת.
- שמור את העמוד באמצעות לחיצה על עדכון או פרסום.
לאחר פרסום עמוד עם קיצור הקוד שהוכנסו לעורך הוויזואלי, נחזור לצד הקדמי של האתר (צד הוויזואלי שחשוף לגולש) וניגש לעמוד שבו היכנסנו את הקוד של טופס יצירת קשר של Contact Form 7. נכון לעכשיו, טופס יצירת קשר אמור להופיע בעמוד זה. אם נמלא את הפרטים ונלחץ על כפתור "שלח" הפניה תתקבל ישירות לכתובת המייל שציינת בעמוד העריכה של התוסף. במידה ונמלא פרטי הכתובת דואר אלקטרוני בצורה לא תקינה (לדוגמה: ללא סימן @) נקבל שגיאה וויזואלית ידידותית ומובנת למשתמש.
שלב 3: להוסיף שדה נוסף למילוי בטופס צור קשר
כמובן זה לא הכל, ויכול להיות שטופס אשר מופיע כאן אינה כוללת שדות שאולי הייתה רוצה לכלול. בשלב זה אנחנו הולכים להוסיף שדות חדשות לטופס שיצרנו בצורה פשוטה. אז כדי להתחיל עליך לגשת לעמוד העריכה של התוסף. לחץ על כפתור "צור תג" ובחר את האפשרות שהכי מתאימה לך. לדוגמה אני אבחר את האפשרות בשם "תיבת בחירה". באמצעות לחיצה על הלוחצן, נפתח לי עוד חלון עם אפשרויות הגדרה ועריכה של "תיבת בחירה". הדבר מתבטא בצורה הבאה. דוגמה: "בחר את המתנות שברצונך להזמין" ואז לגולש יש את האפשרות לסמן V על המוצרים שברצונו להזמין (דוגמה לא הכי מוצלחת אבל זה כעת המקסימום שאני יכול לחשוב עליו). אז נתחיל מהשלב הראשון. נסמן את הווי (V) על אפשרות של "שדה חובה?" בשביל שהבחירה של אפשרות זו יהפוך להיות הכרחית כדי לשלוח טופס אליכם. ז"א שאם גולש לא יבחר אפשרות כלשהי, הטופס יציג שגיאה. אז נמשיך. אין צורך לגעת בשדה של ה-"שם", אלא אם ברצונכם לשנות את השם שלו לצורך נוחיותכם. נקפוץ לאזור שכתוב בו "בחירות". באזור שבו אנו יכולים להכניס טקסט, נכניס כעת 2 שורות. כל שורה יהווה אפשרות סימון לגולש. לאחר מילוי השורות נעתיק את הקוד שמופיע באזור החום מתחת לאזור הטקסט ונדביק אותו לקוד של הטופס בצורה. את הקוד שמופיע באזור הירוק נעתיק בתיבת טקסט בהגדרות הדואר מלטה. נלחץ על שמור ונחזור לעמוד שבו הכנסנו את הקוד של טופס צור קשר בשלב הראשון. נרענן אותו נראה שהתווסף לנו עוד שורה עם אפשרות סימון.
את שלב 3 ניתן ליישם עם כל אחד מאפשרויות שעומדות לפניך בתוסף זה.
סיכום של שלב 3:
לחת על כפתור צור תג ובחר את אפשרות "תיבת בחירה"
סמן ווי על "שדה חובה?"
הכנס את 2 שורות או יותר באזור טקסט הנקרא "בחירות"
עתק את הקוד שכתוב באזור חום לאזור הגדרות התפריט בצד ימין
עתק את הקוד שנמצא באזור ירוק לאזור הגדרות הדואר למטה.
שמור את הטופס באמצעות לחיצה על כפתור "שמור".
זהו זה.
שלב 4: שינוי הודעות שגיאה.
הודעות שגיאה צורפו בשפה העברית יחד עם התוסף אך אם ברצונך לשנות הודעות שגיאה אשר מופיעה לגולש שלא הקיש את השדות באופן תקין או לא רשם את כתובת המייל שלו בצורה תקינה, ניתן להציג לו הודעת שגיאה שונה ממה שכבר נקבע מראש. אז איך משנים אותה? באותו עמוד של עריכת התוסף יצירת קשר בפנל ניהול, למטה נמצא חלון סגור הנקרא "הודעות". עליך להקליק עליו עם סימן של העכבר ויפתח לך רשימה של הודעות שגיאה שבאפשרותך לערוך. אין יותר מדי שלבים לעשות בשביל לערוך את הודעת שגיאה בטופס יצירת קשר של Contact Form 7. חסרי רקע בתחום של בניית אתרים יכולים ללכת לאיבוד ולכן רשמתי שלבים פשוטים לעריכה של הודעות שגיאה.
- חזור לעמוד העריכה של התוסף צור קשר.
- תקליק עם הסימן של העכבר על אפשרות (הודעות) שנמצאת למטה בדף.
- שנה את השדות השגיאה בצורה שבה אתה רוצה שהם יופיעו.
- שמור את השינויים.
זה הכל.
להשתמש בתוסף Contact Form 7 לצורך יצירת תפסים מאוד מומלצת בעקבות הגמישות שלה ואפשרויות העריכה. כל דבר כמעט ניתנת לשינוי עם קצת ידע טכני ויכולת הבנה הלוגית בתפעול התוסף. השימוש ותפעול התוסף מאוד גמיש כפי שציינתי את זה מקודם אך יש צורך בהבנה בסיסית בתפעול המערכת כולה. המשך יבוא….
….
תודה יוסי!!!
מדריך מעולה , בכלל עד שגיליתי את התוסף הזה הייתי שובר את הראש עם כל מיני סקריפטים מגעילים ברשת, בהחלט תוסף מבורך ושימושי בטרוף…
יוסי, כל הכבוד,
איזה כיף לראות מדריכי וידאו, זה הופך את כל הנושא הטכני לפשוט ונוח להבנה.
מאוד נהנתי
תודה! עזרת לי מאוד
תודה רבה.
זה ממש חשוב להבין איזה תוספות איכותיות יש בים הפלאגינים של וורדפרס.
ועוד יותר טוב זה, ממש לקרוא לעומק, להבין כל פיטצ'ר ואפילו לצפות בסרטון הדרכה, ממש מגניב.
נ.ב.
(קבל ח' ח' על העבודה באפטר אפקט, נראה ממש טוב).
כשאני מנסה לשלוח את התגובה זה רושם לי את הדבר הבא:
"אירעה תקלה בשליחה. אנא נסה במועד מאוחר יותר או פנה למנהל המערכת בדרך אחרת."
אתה יודע אולי למה?
זה יכול להיות בעיה בצד השרת.
אם אפשרות משלוח מיילים באמצעות סקריפט סגורה אז זה השגיאה שיכולה להופיע אך לא בהכרח.
נסה להתקין אותה מחדש
תותחים אתם תודה.
יש אפשרות לעצב את הטופס בצורה קצת יותר מושכת?
העלתי את התוסף הכל כביכול עבד כמו שצריך חוץ מהגעת ההודעה לתיבה. האי מייל שלי רשום כמו שצריך, מה זה יכול להיות לדעתך?
היכן להכניס את קוד ההמרה של גוגל אדוורדס?
קצר ולעניין – הוידאו שלך עזר לי ונתן לי בדיוק את מה שרציתי. עכשיו יש לי contact us פייג' שעובד כמו שצריך!
תודה רבה לך.
יוסי שלום,
האם יש מדריך כלשהו שמראה כיצד מוסיפים מסביב לטופס מסגרת? כיצד מוסיפים רקע באותה "קופסא" שמסביב לשדות?
אני מנסה להבליט את הטופס שכרגע נבלע ברקע לבן..
תודה מראש,
מיכל
עזרה עזרה עזרה
איך אני משנה את צבע הטקסט בטופס.
כאשר הגולש ממלא את הטופס, כתב הטקסט הוא בלבן, אך גם הרקע בלבן, ולכן אין רואים מה כתוב, אם בכלל.
איך אני משנה בהגדרות של הפלאגין את צבע הטקסט?
היי ניצן, זה כי בתבנית שלך מוגדר קלאס ככל הנראה שהופך את צבע הכתב בשדות ללבן.
עליך לבדוק בתבנית את הנושא או לכתוב קלאס חדש ב css של התבנית ולהגדיר אותה בעת יצירת טופס.
שאתה יוצר טופס יש לך אפשרות לתת קלאס.
פשוט תגדיר קלאס ב css משהו כמו
color: #fff;
ותכניס את הקלאס בכל שדה שאתה ממוסיף בטופס צור קשר.
מקווה שזה עזר לך
הי יוסי באתר מותקן לי קונטקט פורם 7 לכל הדפים
שיניתי את הטקסט של הטופס אך זה לא תופס בכול הדפים הנה דוגמא לאחר השינוי -שתפס http://www.mayasurf.com/%D7%A8%D7%95%D7%A6%D7%94-%D7%9C%D7%94%D7%A9%D7%AA%D7%A4%D7%A8-%D7%91%D7%92%D7%9C%D7%99%D7%A9%D7%AA-%D7%94%D7%92%D7%9C%D7%99%D7%9D-%D7%91%D7%95%D7%90%D7%99-%D7%9C%D7%90%D7%99%D7%9E%D7%95%D7%A0%D7%99/
והנה שאר האתר לפני השינוי שלא תפס
http://www.mayasurf.com/blog-page/
אודה לעזרתך תודה מראש דלית
יוסי היי
אשח אם אתה יכול לעזור בבעיה שיש לי עם ה – קונטקט פורם 7
כאשר ממלאים פרטים בטופס, הפניה נשלחת ומגיע ליעד אך החצים הקטנים מסתובבים במעגל ולא מפסקים, לכן מי שמילא פרטים גם לא רואה את אישור השליחה.
הסרתי לגמרי והתקנתי מחדש את התוסף אך לא עזר
תודה מראש
עמית
שלום יוסי,
תודה רבה על ההסבר המפורט והנאה.
איך אני יכול לייצא נתונים שמגיעים מהטופס לXL PDF וכו'?
תודה.
היי יוסי,
תודה על הסרטון-בהיר ונגיש.
עקבתי שלב אחר שלב אחר הוראותיך, אך בסופו של דבר
יש שגיאה בשליחה, אינני יודע מה מקורה,
תודה מראש
אליה
fכל הכבוד ,תודה רבה על העזרה
שלום יוסי
האם יש דרך להחליף כפתור "שלח" בתמונה
תודה
אחלה סרטון עזר לי .
תודה
בהחלט אפשרי להעביר לעמוד תודה לאחר שליחה מוצלחת
פיקסל של פייסבוק ביכולתך לשתול בעמוד תודה