יצירת טופס יצירת קשר באמצעות Contact Form 7 בקלות
נכתב ע"י יוחאי ירמיהו3 שאלות
תיאור קצר לשיעור: בשיעור זה ניצור טופס יצירת קשר באמצעות התוסף Contact Form 7. נלמד איך ליצור טפסים, איך להדביק אותם בעמוד, איך להגדיר הודעות, איך לשכפל טפסים ועוד...
אורך השיעור: 11:22 דקות
קורסים המכילים את השיעור וידאו:
תוכן השיעור:
לאחר שסיימנו עם התקנת טופס יצירת קשר 7 כעת השלב הבא יהיה ליצור טופס חדש בתוך העמוד. בשיעור הזה אנחנו נראה איך אפשר ליצור טופס יצירת קשר ואיך לטעון אותו בתוך העמוד באתר.
יצירת טופס יצירת קשר
על מנת ליצור טופס יצירת קשר חדש ב-Contact Form 7 עלינו להיכנס אל אזור הניהול באתר. מתוך אזור הניהול נוכל לראות בתפריט הצדדי את האפשרות של "צור קשר" ונלחץ עליה על מנת להגיע לממשק של טופס יצירת קשר 7.
כאשר אנחנו מתקינים את הטופס יצירת קשר בפעם הראשונה הוא מתקין טופס יצירת קשר לדוגמא וניתן למחוק אותו.
על מנת ליצור טופס חדש נלחץ על כפתור ההוספה בראש העמוד.
ניתן לטופס יצירת קשר כותרת של "טופס יצירת קשר עם הודעה" ונשמור את הטופס. לאחר מכן ניקח את השורטקוד שקיבלנו ונדאג להדביק אותו באחד העמודים בכדי לראות איך זה נראה בפועל.
בתוך העמוד נוכל להשתמש בעורך הטקסט של אלמנטור ולהדביק את השורטקוד בתוכו וניתן גם להשתמש בווידג'ט של אלמנטור של שורטקוד ולהדביק את הקוד. למידע נוסף על שורטקודים צפו בשיעור של מה זה שורטקוד (Shortcode).
לאחר הדבקת הקוד נוכל לראות את הטופס בתוך העמוד ונחזור לעמוד של יצירת קשר ונתרגם את הטופס של העמוד בצורה טובה יותר לעברית ונסיר את השדה של נושא גם מהטופס וגם מהאימייל.
נקודות חשובות בעת יצירת טופס יצירת קשר 7
כאשר אנחנו יוצרים את הטופס יצירת קשר באמצעות Contact Form 7 חשוב שנכיר כמה פרמטרים שונים. הראשון הוא השימוש בסימן של כוכבית *.
כאשר אנחנו משתמשים בסימן זה ליד שם השדה שאנחנו יוצרים זה הופך את השדה הזה לשדה חובה וזה אומר שאי אפשר לשלוח את ההודעה ללא מילוי השדה.
[text* your-name]
המילה text מסמלת את סוג השדה שאנחנו יוצרים (במקרה הזה שדה שאפשר להכניס בו טקסט), הסימן * מסמל שמדובר על שדה שחובה למלא והמילה your-name היא מזהה ייחודי לשדה שבאמצעותו נוכל בהמשך לקבל את התוכן שהכניס הגולש עבור המידע בשדה.
כאשר אנחנו מכניסים שדה בטופס יצירת קשר 7 נוכל להשתמש באפשרויות שמוצגות מעל האזור של הטופס אבל חשוב לדעת שאנחנו צריכים להגדיר את סוג השדה text, email, textarea וכו'…. ושם ייחודי לשדה שלא קיים כבר בטופס כמו your-name (רק ששונה מהשם הזה כי הוא כבר קיים).
במידה ואנחנו רוצים להוסיף טקסט שומר מקום שיופיע בתוך השדה נוכל לעשות זאת על ידי הכנסת הערך של placeholder עם הטקסט שאנחנו רוצים שיופיע בשדה בצורה הבאה:
[text* your-name placeholder "שם מלא"]
במידה ואתם בוני אתרים עם ידע בקוד CSS ואתם רוצים לזהות את אחד המשתנים בטופס יצירת קשר ולתת לו קוד ייחודי אפשר להוסיף למשתנה Class או קוד ID בצורה הבאה.
[text* your-name id:your-name_id class:your-name_class placeholder "שם מלא"]
לאחר שסיימנו עם כל השינויים שאנחנו צריכים הטופס יצירת קשר שאני יצרתי זה הטופס הבא ותוכלו פשוט להעתיק אותו ולהדביק בטפס יצירת קשר שאתם יוצרים.
עריכת הצגת הודעות ושגיאות של הטופס
אופציה נוספה שקיימת היא היכולת לשנות את ההודעות שמוצגות באמצעות טופס יצירת קשר 7. אם למשל אתם מנסים למלא הודעה בטופס מבלי למלא אף שדה תקבלו את ההודעה "קיימת שגיאה בשדה אחד או יותר. נא לבדוק ולנסות שוב."
אם ניכנס לאזור עריכה של הטופס ונבחר באפשרות של "הודעות" נוכל למצוא את ההודעה הזאת בתוך האזור הודעות ביחד עם כל שאר ההודעות שטופס יצירת קשר 7 יכול להציג ותהיה לנו את האפשרות לשנות את ההודעה ולבחור במקומה הודעה אחרת לגמרי. היכולת לשנות את ההודעות היא גם אחת הסיבות שהתוסף הזה כל כך פופולרי וזה הופך אותו לגמיש מאוד.
לאחר עריכת ההודעות שמרו את הטופס ותנסו למלא את הטופס בעמוד ולוודא שאתם מקבלים את ההודעה למייל.
שכפול טופס יצירת קשר 7
אין לך הרשאות גישה לתוכן של העמוד
לאחר שסיימנו את כל ההגדרות של טופס יצירת קשר 7 וכן זה לא היה פשוט בכלל אז החדשות הטובות הם שאנחנו לא חייבים ליצור כל טופס מ-0 ולהגדיר אותו מחדש.
אם אנחנו נחזור לעמוד הראשי של יצירת טפסי יצירת קשר נוכל לראות שם את הטופס שיצרנו בעמוד.
אם נרחף מעל שם הטופס תהיה לנו את האפשרות ללחוץ על הכפתור של "שכפול" ועל ידי לחיצה על כפתור זה נשכפל את הטופס עם כל ההגדרות ונוכל רק לבצע שינויים קטנים על מנת ליצור טפסים בהמשך בצורה קלה יותר.
ודרך אגב אם זה לא היה ברור אפשר להשתמש באותו שורטקוד ולטעון את הטופס בכמה עמודים שאנחנו רוצים.
הצטרפו לקהילות המובילות של בוני האתרים בישראל
זה הזמן להצטרף לקהילה שלנו ולקבל סיוע ותמיכה בקבוצות המובילות בארץ לבוני אתרים בוורדפרס (-:
קורסים מקיפים ומומלצים ללימוד בניית אתרים
לבנות אתר ב-10 ימים
קורס מזורז שילמד אותך לבנות אתרים ב-10 ימים. נקודת כניסה מעולה לתחום של בניית אתרים במחיר משתלם.
- לבנות אתר ב-10 ימים 56 שיעורים שילמדו אותך הכל על בניית אתרים
- בונוס 1: לבנות אתר מתבנית מוכנה לאנשים עסוקים שלא רוצים להשקיע 10 ימים
- בונוס 2: גיבוי, שחזור, ותחזוקה לאתר איך לבצע גיבויים ולתחזק אתר ללא תקלות
- בונוס 3: אלמנטור קונטיינר (Container) איך ליצור תוכן באמצעות אלמנטור קונטיינר
- בונוס 4: אחסון אתרים ב-Cloudways אחסון אתרים על גבי חברות השרתים המובילות בעולם
- בונוס 5: קלאודפלייר + מייל עסקי בחינם איך להשתמש בקלאודפלייר + יצירת מייל עסקי בחינם
- בונוס 6: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
- בונוס 7: יצירה וניהול של רשימות תפוצה ברב מסר איך ליצור סדרות מיילים ואוטומציות שיכניסו כסף על אוטומט
- תמיכה לשנה לשאלות בעמודי השיעורים
- גישה לקבוצת הפייסבוק
- גישה לכל החיים
- תעודה הכשרה בסיום הלימודים (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-14 ימים
רכשו את הקורס 1078 סטודנטים לפניך (-:
מסלול וורדפרס Expert
למעלה מ-10 קורסים מלאים ומעל 700 שיעורים שילמדו אותך הכל על בניית אתרים ברמה הגבוהה ביותר בארץ.- בניית אתר ב-10 ימים איך לבנות אתר במהירות שיא
- וורדפרס Beginner לימוד בניית אתרים למתחילים – (2,250 ₪)
- וורדפרס Tool Kit הצעת מחיר + אפיון + צ'ק ליסט + התנהלות עם לקוחות
- וורדפרס Next Level מחיר 2,500 ₪
- וורדפרס SEO התאמת אתרים לגוגל – (750 ₪)
- : אלמנטור Ninja הקורס שיהפוך אותך לנינג'ה באלמנטור – (999 ₪)
- אלמנטור PRO + אנימציות יצירת אתרים מורכבים ואנימציה – (550 ₪)
- וורדפרס Rocket שיפור מהירות לאתר – (999 ₪)
- וורדפרס Security חיזוק אבטחה לאתר – (750 ₪)
- וורדפרס Global בניית אתרים דו לשוניים בכל השפות – (750 ₪)
- בונוס 1: גיבוי, שחזור, ותחזוקה לאתר תחזוקת אתרים ומניעת בעיות ותקלות
- בונוס 2: אנליטיקה ומעקב לאתר גוגל אנליטיקס, סרץ קונסול ויאנדקס מטריקה
- בונוס 3: איך לקבל יותר פניות מהאתר הוספת כפתורי יצירת קשר + שיפור המרות
- בונוס 4: קלאודפלייר + מייל עסקי בחינם שימוש בקלאודפלייר ויצירת מייל עסקי בחינם
- בונוס 5: התקנת אתר על המחשב איך להשתמש במחשב ולחסוך עלויות אחסון
- בונוס 6: Cloudways אחסון אתרים בחברות השרתים המובילות בעולם
- בונוס 7: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
- בונוס 8: אופטימיזציה לתמונות איך להעלות תמונות שיעזרו לאתר להתקדם בגוגל
- בונוס 9: יסודות העיצוב לבוני אתרים כל מה שצריך לדעת כדי לעצב את האתר המושלם
- בונוס 10: זכויות יוצרים בדיגיטל איך להימנע מתביעה משפטית כאשר בונים אתר
- בונוס 11: 20 אלף בחודש מבניית אתרים איך למצוא לקוחות ולייצר הכנסה מבניית אתרים
- בונוס 12: משיחת מכירה לכסף בחשבון איך לשפר את התהליך מכירה ולסגור יותר עסקאות
- בונוס 13: התנהלות עם לקוחות + ניהול פרויקטים איך מתנהל פרויקט בניית אתרים כולל תחזוקה לאתר
- בונוס 14: יצירה וניהול של רשימות תפוצה ברב מסר איך ליצור סדרות מיילים ואוטומציות שיכניסו כסף על אוטומט
- 758 שיעורים למתחילים + למתקדמים
- תמיכה לשנה לשאלות בעמודי השיעורים
- גישה לקבוצת הפייסבוק של הקורס
- גישה לכל החיים
- תעודה הכשרה בסיום הקורס (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-14 ימים
רכשו את הקורס 765 סטודנטים לפניך (-:
אם אהבתם את השיעור ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת:
עוסק בתחום של פיתוח אתרים ועיצוב גרפי למעלה מ-15 שנה. נינג'ה מומחה לוורדפרס, מפתח תוספים ותבניות בהתאמה אישית והמרצה שלכם בקורס הדיגיטלי המקיף והמוביל בישראל ללימוד בניית אתרים בוורדפרס בצורה נכונה.
שאלות ותשובות לשיעור
3 שאלות
באסה, היכולת לשאול שאלות בשיעור פתוחה רק למשתמשים שרכשו את הקורס
היי יוחאי,
אשמח לדעת אם נדרש בטופס לבצע תיבת סימון של אישור מדיניות הפרטיות,
במידה וכן אשמח אם תוכל לכתוב קוד שמתאים לכך.
תודה רבה.
היי, בטופס יצירת קשר בדרך כלל לא נהוג להוסיף תיבת סימון למדיניות פרטיות.
מה שכן אם אתה מוסיף את המשתמש לרשימת תפוצה ושולח לו הודעות לאחר מכן באופן אוטומטי כאן כן כדי להוסיף תיבת סימון או לפחות הודעה שמציינת שהוא נרשם לרשימת תפוצה.
אגב, את רוב התקנונים ומידע עליהם יש בקורס של זכויות יוצרים:
https://wp-school.co.il/my-courses-products/?p=digital_copyrights
ומעבר לזה אם אתה משתמש בגרסת PRO של אלמנטור עדיף להשתמש באפשרות של טופס יצירת קשר שלהם ולא בתוסף הזה.
הרבה יותר קל ליצור טפסים דרך אלמנטור וגם הרבה יותר קל לערוך אותם. הוספתי את התוכן על התוסף הזה רק למקרה שתתקל בו באתרים של לקוחות או במידה ואין לך גישה לאלמנטור PRO.
אבל אם יש לך אלמנטור PRO אז עדיף לא להתקין גם את התוסף הזה באתר.
אם אין לך אלמנטור תודיע לי ואני אצטרף לך כאן גם קוד לתיבת סימון.
יש לי אלמנטור פרו, תודה רבה