קטע העתקה-הדבקה להחלפת כל לינקי mailto בטופס יצירת קשר

קטע JavaScript שממיר אוטומטית לינקי mailto לטופס יצירת הקשר שלכם בכל האתר.

הקטע

גרסה בסיסית

החלפת כל לינקי mailto בטעינת הדף:

// Replace all mailto links with contact form
(function() {
  // כתובת טופס SupportRetriever שלך
  const FORM_URL = 'https://supportretriever.com/form/your-form-id';
  
  // Find all mailto links
  const mailtoLinks = document.querySelectorAll('a[href^="mailto:"]');
  
  // Replace each one
  mailtoLinks.forEach(link => {
    const originalHref = link.getAttribute('href');
    const emailMatch = originalHref.match(/mailto:([^?]+)/);
    
    if (emailMatch) {
      // Keep the visible text, change the URL
      link.setAttribute('href', FORM_URL);
      
      // Add data attribute for reference
      link.setAttribute('data-original-email', emailMatch[1]);
      
      // Optional: Add analytics tracking
      link.setAttribute('data-converted', 'true');
    }
  });
})();

איך זה עובד

  1. מוצא את כל לינקי mailto עם a[href^="mailto:"]
  2. מחלץ את כתובת האימייל מכל לינק
  3. מחליף את href בכתובת הטופס שלכם
  4. שומר על הטקסט הגלוי ללא שינוי
  5. מוסיף data attributes למעקב

לפני ואחרי

לפני (HTML):

<a href="mailto:support@example.com">Contact Support</a>
<a href="mailto:sales@example.com?subject=Inquiry">Talk to Sales</a>

אחרי (מרונדר):
טקסט הלינק זהה, לחיצה פותחת טופס במקום לקוח אימייל.

גרסה מתקדמת עם אפשרויות

ניתוב לפי מחלקה

חילוץ מחלקה מכתובת האימייל והוספה ל-URL הטופס (ראו קוד בדוגמה המקורית עם departmentMap).

מעקב מקור

הוספת פרמטר מקור לפי מיקום הדף (path).

אינטגרציית Analytics

מעקב קליקים ב-Google Analytics (gtag / ga).

אפשרויות בטיחות

הדרת לינקים מסוימים

רשימת אימיילים ו-selectors להדרה (excludeאימיילs, excludeSelectors).

Fallback

שמירת mailto מקורי ב-data attribute ומתן אפשרות לפתוח אימייל אם הטופס לא נטען.

התקנה

אתר HTML פשוט

הוספת הסקריפט לפני תג הסגירה </body>.

WordPress

שיטה 1: עורך התבנית – הוספה ל-footer.php לפני </body>.

שיטה 2: תוסף Code Snippets – הוספת snippet שרץ ב-Frontend.

שיטה 3: תוסף מותאם – יצירת plugin ב-wp-content/plugins/replace-mailto/.

Webflow, Shopify, Squarespace

הוספת הסקריפט ב-Custom Code / Code Injection (Footer).

React/Next.js

שימוש ב-hook או קומפוננטה עם useEffect ו-querySelectorAll('a[href^="mailto:"]').

בדיקה

  • בדיקת קונסול לשגיאות
  • בדיקת לינקים שהומרו ([data-converted="true"])
  • בדיקה בסביבת staging
  • בדיקה ב-iPhone Mail (לינקי טופס באימייל, לא mailto)

נושאים קשורים

מוכנים לפשט את התמיכה?
הצטרפו לאלפים שמשתמשים ב-SupportRetriever לניהול שיחות עם לקוחות.
נסה חינם

גלה עוד

עיין בכל המאמרים