חיפוש ]

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

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

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

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

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

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

הגבלת אימיילים חינמיים בטופס 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('אנא השתמש באימייל עסקי.');
    }
});

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

שימוש ב-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 לאימות מאפשר דרך חזקה ליישום כללים מותאמים אישית, ומבטיח שהטופס יקבל רק כתובות אימייל נדרשות."

הגבלת אימיילים חינמיים ב-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, השיטות הללו מאפשרות לכם לאכוף שימוש באימיילים עסקיים בצורה חלקה.

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

  • חתול 22 נובמבר 2024, 10:20

    אין צורך להשתמש ב-js לאימות מידע בטופס. Html תומך באימות עם regex בצורה מובנה. זה גם יחסוך שימוש ב-alert ויציג הודעת שגיאה יפה.

    • רועי יוסף 22 נובמבר 2024, 12:39

      אני בהלם שלא גיליתי את זה עד היום. תודה ששיתפת! אעדכן את הפוסט בהתאם…

תגובה חדשה

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

Savvy WordPress Development official logo