כיצד להגביל ספקי אימייל חינמיים בטפסי HTML וטפסים של CF7

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

במדריך זה נבחן כיצד להפעיל מגבלה זו בטפסי HTML ובתוסף הפופולרי Contact Form 7 (CF7).

למה להגביל ספקי דוא"ל חינמיים?

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

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

דומיינים נפוצים של אימייל חינמי לחסימה

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

const restrictedDomains = [
    'gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com',
    'aol.com', 'protonmail.com', 'proton.me', 'icloud.com',
    'mail.com', 'zoho.com', 'yandex.com', 'gmx.com',
    'tutanota.com', 'tuta.com', 'live.com', 'msn.com'
];

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

הגבלת אימיילים חינמיים בטופס HTML

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

קוד HTML

<form id="corporate-email-form">
    <label for="email">הזן את האימייל העסקי שלך:</label>
    <input type="email" id="email" name="email" required>
    <button type="submit">שלח</button>
</form>

קוד JavaScript

document.getElementById('corporate-email-form').addEventListener('submit', function (e) {
    const emailField = document.getElementById('email');
    const emailValue = emailField.value;
    const restrictedDomains = ['gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com'];

    const domain = emailValue.split('@')[1];
    if (restrictedDomains.includes(domain)) {
        e.preventDefault();
        alert('אנא השתמש באימייל עסקי.');
    }
});

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

יש לציין כי רשימת הדומיינים בדוגמה כוללת רק את הנפוצים ביותר. בפועל, כדאי להוסיף גם דומיינים כמו protonmail.com, aol.com ו-icloud.com בהתאם לצרכים שלכם.

שימוש בתכונת pattern של HTML5

ניתן גם להשתמש בתכונת pattern המובנית ב-HTML5 על שדה האימייל לצורך אימות בסיסי ברמת הדפדפן. גישה זו מספקת משוב מיידי ללא צורך ב-JavaScript:

<input
    type="email"
    id="email"
    name="email"
    pattern="^[a-zA-Z0-9._%+-]+@(?!gmail.com$|yahoo.com$|outlook.com$|hotmail.com$)[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$"
    title="אנא השתמשו באימייל עסקי, לא בספק חינמי כמו Gmail או Yahoo."
    required
>

תכונת pattern משתמשת ב-Regex שדוחה אימיילים מהספקים החינמיים ברשימה. תכונת title מספקת הודעת tooltip מותאמת כאשר האימות נכשל.

שימוש ב-Regex לאימות מתקדם

לאימות מתקדם יותר, ניתן להשתמש בתבנית Regex כדי להוציא דומיינים מסוימים בצורה דינמית.

קוד JavaScript עם Regex

const emailRegex = /^[a-zA-Z0-9._%+-]+@(?!gmail.com$|yahoo.com$|outlook.com$|hotmail.com$)[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;

document.getElementById('corporate-email-form').addEventListener('submit', function (e) {
    const emailField = document.getElementById('email');
    const emailValue = emailField.value;

    if (!emailRegex.test(emailValue)) {
        e.preventDefault();
        alert('אנא השתמש באימייל עסקי.');
    }
});

הסבר: Regex זה מבטיח שדומיין האימייל אינו תואם לרשימת הדומיינים המוגבלים. הוא מבצע אימות דינמי ומונע שליחה אם זוהה אימייל חינמי.

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

חשיבות האימות בצד השרת

בואו נדגיש נקודה חשובה: אימות בצד הלקוח בלבד (JavaScript) אינו מספיק. משתמש מנוסה יכול לעקוף את הבדיקה בקלות באמצעות כלי הפיתוח של הדפדפן, או לשלוח בקשת POST ישירות לשרת תוך דילוג על ה-JavaScript לחלוטין.

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

הגבלת אימיילים חינמיים ב-Contact Form 7

אמנם Contact Form 7 אינו תומך ישירות בתכונת pattern, אך ניתן לאכוף בדיקת אימייל עסקי באמצעות הפילטר wpcf7_validate_email בצד השרת, או באמצעות JavaScript בצד הלקוח.

שימוש בפילטר wpcf7_validate_email

Contact Form 7 מספק את הפילטר wpcf7_validate_email, המאפשר לאמת את שדות האימייל בצד השרת במהלך שליחת הטופס. כך תגבילו דומיינים חינמיים:

function validate_corporate_email_field( $result, $tag ) {
    // בדיקה רק על שדה בשם "corporate-email"
    if ( $tag->name !== 'corporate-email' ) {
        return $result;
    }

    $restricted_domains = ['gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com'];

    $email = isset( $_POST['corporate-email'] ) ? sanitize_email( $_POST['corporate-email'] ) : '';
    $domain = strtolower( substr( strrchr( $email, '@' ), 1 ) );

    if ( in_array( $domain, $restricted_domains ) ) {
        // ביטול השליחה והצגת הודעה בתוך .wpcf7-response-output
        $result->invalidate( $tag, 'אנא השתמש באימייל עסקי.' );
    }

    return $result;
}
add_filter( 'wpcf7_validate_email*', 'validate_corporate_email_field', 20, 2 );

חשוב לדעת: קוד זה פועל רק כאשר שם שדה האימייל הוא corporate-email. יש להוסיף לטופס שדה כזה:

[email* corporate-email placeholder "email@yourcompany.com*"]

"שימוש בשם השדה corporate-email מאפשר לאמת רק אותו שדה ולא משפיע על שדות אימייל אחרים בטופס."

אימות בצד הלקוח עם JavaScript

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

document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('.wpcf7 form');

    if (form) {
        form.addEventListener('submit', function (e) {
            const emailField = form.querySelector('input[name="corporate-email"]');
            const emailValue = emailField.value.trim();
            const restrictedDomains = ['gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com'];

            if (emailValue.includes('@')) {
                const domain = emailValue.split('@')[1].toLowerCase();

                if (restrictedDomains.includes(domain)) {
                    alert('אנא השתמש באימייל עסקי.');
                    e.preventDefault(); // מונע את שליחת הטופס
                }
            }
        });
    }
});

הסבר: הקוד מזהה את שדה האימייל לפי input[name="corporate-email"] בלבד. אם הדומיין כלול ברשימת הדומיינים החינמיים, מתקבלת הודעת אזהרה והשליחה נחסמת.

"שילוב בין אימות צד שרת וצד לקוח מבטיח בדיקה אמינה וחוויית משתמש טובה יותר בסופו של דבר."

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

שאלות נפוצות

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

סיכום

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

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