קטע 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');
}
});
})();
איך זה עובד
- מוצא את כל לינקי mailto עם
a[href^="mailto:"] - מחלץ את כתובת האימייל מכל לינק
- מחליף את href בכתובת הטופס שלכם
- שומר על הטקסט הגלוי ללא שינוי
- מוסיף 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)
