טיפול באירועים ב-Contact Form 7

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

CF7 נותן לכם ממשק פשוט, בדיקת nonce, שליחת AJAX ושליחת אימיילים מהקופסה! הוא חסין, ניתן להרחבה, ומגיע עם אינטגרציות מובנות ל-CAPTCHA, לאנטי-ספאם ואפילו לסינון.

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

תנאים מקדימים: לגרום ל-CF7 לעבוד כמו שצריך

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

wp_head();  // הניחו בכותרת (header)
wp_footer(); // הניחו בתחתית (footer)

הפונקציות האלה טוענות כמו שצריך את ה-JavaScript של CF7 – דילוג עליהן היא מלכודת נפוצה, במיוחד בתבניות מותאמות אישית.

אירועי CF7 חיוניים ומתי להשתמש בהם

ארבעת האירועים שאני באמת משתמש בהם:

1. ולידציית טופס (wpcf7invalid)

יורה אחרי שהשרת עיבד את השליחה ואמר לא. התגובה בדרך כלל אומרת לכם בדיוק איזה שדה נכשל ולמה.

document.addEventListener('wpcf7invalid', function(event) {

  console.log('Form Invalid:', event.detail);

});

2. זיהוי ספאם (wpcf7spam)

גרסה מיוחדת של “לא תקין”: השרת קיבל את השליחה והחליט שהיא מריחה כמו ספאם. אותו תזמון כמו wpcf7invalid.

document.addEventListener('wpcf7spam', function(event) {
    // טיפול בשליחות שעלולות להיות ספאם
    console.log('Possible spam detected:', event.detail);
});

3. הצלחה! (wpcf7mailsent)

זה שכולם באו בשבילו. המייל יצא, אז תעשו את שלכם, למשל את ההפניה הקלאסית לדף תודה:

document.addEventListener('wpcf7mailsent', function(event) {
    // הפניה אחרי שליחה מוצלחת
    window.location.href = '/thank-you-page';
});

4. שליחת הטופס הושלמה (wpcf7submit)

תופס הכול. לא אכפת לו איך זה נגמר.

document.addEventListener('wpcf7submit', function(event) {
    // יורה ללא תלות בתוצאה
    console.log('Form submitted:', event.detail);
});

CF7 חינמי. אם הוא חוסך לכם זמן, שקלו לתרום לפרויקט או לתרום כספית.

טיפים

• האירועים האלה עובדים גם עם jQuery – פשוט השתמשו ב-$(document).on('wpcf7mailsent',...)
• גישה לנתוני הטופס דרך event.detail.inputs
• בדקו אירועים באמצעות כלי הפיתוח בדפדפן
• המייל נשלח אבל לא הגיע? בדרך כלל זה SPF, DKIM ו-DMARC, לא CF7. בונה ה-SPF וה-DMARC יראה לכם מה באמת כתוב ברשומות שלכם
• האירועים יורים בסדר הזה: ולידציה ← בדיקת ספאם ← שליחת מייל, ו-wpcf7submit תמיד יורה אחרון, לא משנה מה התוצאה.

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