مقتطف نسخ ولصق لاستبدال كل روابط 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 للتتبع

قبل وبعد

قبل (HTML):

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

بعد (بعد العرض):

<a href="https://supportretriever.com/form/your-form-id" 
   data-original-email="support@example.com"
   data-converted="true">Contact Support</a>

<a href="https://supportretriever.com/form/your-form-id" 
   data-original-email="sales@example.com"
   data-converted="true">Talk to Sales</a>

ما يراه المستخدم: نفس نص الرابط، لكن النقر يفتح النموذج بدلاً من عميل البريد.

نسخة متقدمة مع خيارات

مع توجيه القسم

استخراج القسم من البريد وإضافته إلى عنوان النموذج:

(function() {
  const FORM_URL = 'https://supportretriever.com/form/your-form-id';
  
  // Map email addresses to departments
  const departmentMap = {
    'support': 'support',
    'help': 'support',
    'sales': 'sales',
    'press': 'press',
    'info': 'general',
    'contact': 'general'
  };
  
  document.querySelectorAll('a[href^="mailto:"]').forEach(link => {
    const originalHref = link.getAttribute('href');
    const emailMatch = originalHref.match(/mailto:([^@]+)@/);
    
    if (emailMatch) {
      const prefix = emailMatch[1].toLowerCase();
      const department = departmentMap[prefix] || 'general';
      
      // Add department parameter to form URL
      const newHref = `${FORM_URL}?type=${department}&converted=true`;
      link.setAttribute('href', newHref);
      link.setAttribute('data-original-email', emailMatch[0].replace('mailto:', ''));
      link.setAttribute('data-converted', 'true');
    }
  });
})();

النتيجة:

• mailto:support@example.com → form-url?type=support
• mailto:sales@example.com → form-url?type=sales
• mailto:press@example.com → form-url?type=press

مع تتبع المصدر

إضافة معلمة المصدر حسب موقع الصفحة:

(function() {
  const FORM_URL = 'https://supportretriever.com/form/your-form-id';
  
  // Determine المصدر from current page
  const path = window.location.pathname;
  let المصدر = 'unknown';
  
  if (path === '/' || path === '/index.html') {
    المصدر = 'homepage';
  } else if (path.includes('/pricing')) {
    المصدر = 'pricing';
  } else if (path.includes('/blog')) {
    المصدر = 'blog';
  } else if (path.includes('/support')) {
    المصدر = 'support-page';
  } else if (path.includes('/contact')) {
    المصدر = 'contact-page';
  }
  
  document.querySelectorAll('a[href^="mailto:"]').forEach(link => {
    const originalHref = link.getAttribute('href');
    const emailMatch = originalHref.match(/mailto:([^?]+)/);
    
    if (emailMatch) {
      // Add المصدر parameter
      const newHref = `${FORM_URL}?المصدر=${المصدر}&converted=true`;
      link.setAttribute('href', newHref);
      link.setAttribute('data-original-email', emailMatch[1]);
    }
  });
})();

مع تكامل Google Analytics

تتبع التحويلات في Google Analytics:

(function() {
  const FORM_URL = 'https://supportretriever.com/form/your-form-id';
  
  document.querySelectorAll('a[href^="mailto:"]').forEach(link => {
    const originalHref = link.getAttribute('href');
    const emailMatch = originalHref.match(/mailto:([^?]+)/);
    
    if (emailMatch) {
      link.setAttribute('href', FORM_URL);
      link.setAttribute('data-original-email', emailMatch[1]);
      
      // Add click tracking
      link.addEventListener('click', function(e) {
        // Google Analytics 4
        if (typeof gtag !== 'undefined') {
          gtag('event', 'form_link_click', {
            'link_type': 'converted_mailto',
            'original_email': emailMatch[1],
            'page_path': window.location.pathname
          });
        }
        
        // Google Analytics Universal
        if (typeof ga !== 'undefined') {
          ga('send', 'event', 'Contact', 'Click', 'Converted mailto');
        }
      });
    }
  });
})();

خيارات الأمان

استبعاد روابط محددة

عدم تحويل روابط mailto معينة:

(function() {
  const FORM_URL = 'https://supportretriever.com/form/your-form-id';
  
  // البريد الإلكترونيs to exclude from conversion
  const excludeالبريد الإلكترونيs = [
    'personal@example.com',
    'noreply@example.com'
  ];
  
  // Selectors to exclude from conversion
  const excludeSelectors = [
    '.keep-mailto',
    '#footer .personal-email',
    '[data-keep-mailto="true"]'
  ];
  
  document.querySelectorAll('a[href^="mailto:"]').forEach(link => {
    // Check if link should be excluded
    const shouldExclude = excludeSelectors.some(selector => 
      link.matches(selector) || link.closest(selector)
    );
    
    if (shouldExclude) return;
    
    const originalHref = link.getAttribute('href');
    const emailMatch = originalHref.match(/mailto:([^?]+)/);
    
    if (emailMatch && !excludeالبريد الإلكترونيs.includes(emailMatch[1])) {
      link.setAttribute('href', FORM_URL);
      link.setAttribute('data-original-email', emailMatch[1]);
      link.setAttribute('data-converted', 'true');
    }
  });
})();

الاستخدام:

<!-- This will be converted -->
<a href="mailto:support@example.com">تواصل معنا</a>

<!-- This will NOT be converted (has class) -->
<a href="mailto:personal@example.com" class="keep-mailto">Personal البريد الإلكتروني</a>

<!-- This will NOT be converted (data attribute) -->
<a href="mailto:john@example.com" data-keep-mailto="true">John's البريد الإلكتروني</a>

إضافة بديل

توفير بديل إذا لم يُحمَّل النموذج:

(function() {
  const FORM_URL = 'https://supportretriever.com/form/your-form-id';
  
  document.querySelectorAll('a[href^="mailto:"]').forEach(link => {
    const originalHref = link.getAttribute('href');
    const emailMatch = originalHref.match(/mailto:([^?]+)/);
    
    if (emailMatch) {
      // Store original mailto in data attribute
      link.setAttribute('data-mailto-fallback', originalHref);
      link.setAttribute('data-original-email', emailMatch[1]);
      
      // Replace with form URL
      link.setAttribute('href', FORM_URL);
      
      // Add error handler
      link.addEventListener('click', function(e) {
        setTimeout(() => {
          // If form didn't load, offer fallback
          const fallback = confirm(
            'Having trouble opening the form? Click OK to use email instead.'
          );
          if (fallback) {
            window.location.href = originalHref;
          }
        }, 5000);
      });
    }
  });
})();

تعليمات التثبيت

موقع HTML عادي

أضف قبل وسم إغلاق </body>:

<!DOCTYPE html>
<html>
<head>
  <title>أنتr Site</title>
</head>
<body>
  
  <!-- أنتr content with mailto links -->
  <a href="mailto:support@example.com">تواصل معنا</a>
  
  <!-- Add script before closing body tag -->
  <script>
    (function() {
      const FORM_URL = 'https://supportretriever.com/form/your-form-id';
      
      document.querySelectorAll('a[href^="mailto:"]').forEach(link => {
        const originalHref = link.getAttribute('href');
        const emailMatch = originalHref.match(/mailto:([^?]+)/);
        
        if (emailMatch) {
          link.setAttribute('href', FORM_URL);
          link.setAttribute('data-original-email', emailMatch[1]);
        }
      });
    })();
  </script>
</body>
</html>

WordPress

الطريقة 1: تذييل القالب

1. انتقل إلى المظهر → محرر السمة
2. افتح footer.php
3. أضف السكربت قبل وسم </body>
4. احفظ التغييرات

الطريقة 2: إضافة Code Snippets

1. ثبّت إضافة Code Snippets
2. أضف مقتطفاً جديداً
3. الصق السكربت (بدون وسوم <script>)
4. اضبط التشغيل على Frontend
5. فعّل المقتطف

الطريقة 3: إضافة مخصصة

أنشئ wp-content/plugins/replace-mailto/replace-mailto.php:

<?php
/**
 * Plugin الاسم: Replace mailto Links
 * الوصف: Replaces mailto links with contact form
 * Version: 1.0
 */

function replace_mailto_script() {
    ?>
    <script>
    (function() {
      const FORM_URL = 'https://supportretriever.com/form/your-form-id';
      
      document.querySelectorAll('a[href^="mailto:"]').forEach(link => {
        const originalHref = link.getAttribute('href');
        const emailMatch = originalHref.match(/mailto:([^?]+)/);
        
        if (emailMatch) {
          link.setAttribute('href', FORM_URL);
          link.setAttribute('data-original-email', emailMatch[1]);
        }
      });
    })();
    </script>
    <?php
}
add_action('wp_footer', 'replace_mailto_script');

فعّل الإضافة من إدارة WordPress.

Webflow

1. انتقل إلى Project الإعدادات
2. انقر تبويب Custom Code
3. مرّر إلى Footer Code
4. الصق السكربت مع وسوم <script>
5. انشر الموقع

<script>
(function() {
  const FORM_URL = 'https://supportretriever.com/form/your-form-id';
  
  document.querySelectorAll('a[href^="mailto:"]').forEach(link => {
    const originalHref = link.getAttribute('href');
    const emailMatch = originalHref.match(/mailto:([^?]+)/);
    
    if (emailMatch) {
      link.setAttribute('href', FORM_URL);
      link.setAttribute('data-original-email', emailMatch[1]);
    }
  });
})();
</script>

Shopify

1. انتقل إلى Online Store → Themes
2. انقر Actions → تعديل Code
3. افتح theme.liquid
4. أضف السكربت قبل وسم </body>
5. احفظ التغييرات

Squarespace

1. انتقل إلى الإعدادات → Advanced → Code Injection
2. الصق في قسم Footer
3. احفظ التغييرات

React/Next.js

أنشئ خطافاً أو مكوّناً:

// hooks/useReplaceMailto.js
import { useEffect } from 'react';

export function useReplaceMailto(formUrl) {
  useEffect(() => {
    const mailtoLinks = document.querySelectorAll('a[href^="mailto:"]');
    
    mailtoLinks.forEach(link => {
      const originalHref = link.getAttribute('href');
      const emailMatch = originalHref.match(/mailto:([^?]+)/);
      
      if (emailMatch) {
        link.setAttribute('href', formUrl);
        link.setAttribute('data-original-email', emailMatch[1]);
      }
    });
  }, [formUrl]);
}

// Usage in component:
import { useReplaceMailto } from '../hooks/useReplaceMailto';

function Layout({ children }) {
  useReplaceMailto('https://supportretriever.com/form/your-form-id');
  
  return <div>{children}</div>;
}

الاختبار

التحقق من العمل

1. تحقق من وحدة التحكم للأخطاء:

// Add to snippet for debugging
console.log('mailto replacement script loaded');
console.log('Found ' + mailtoLinks.length + ' mailto links');

2. فحص الروابط المحوّلة:

// Check what was converted
document.querySelectorAll('[data-converted="true"]').forEach(link => {
  console.log('Converted:', link.getAttribute('data-original-email'));
});

3. اختبر على بيئة تجريبية أولاً:

• نشر على البيئة التجريبية
• تحقق من كل الصفحات التي تحتوي روابط mailto
• انقر كل رابط محوّل
• تأكد من فتح النموذج بشكل صحيح

4. التحقق على بريد iPhone:

• أرسل بريداً تجريبياً يحتوي رابط mailto
• افتحه في بريد iPhone
• انقر الرابط
• تأكد من فتح النموذج (وليس عميل البريد)

التحقق من العمل في بريد iPhone

لماذا يهم هذا

مشكلة mailto في iOS 26.1 تحدث تحديداً عند النقر على روابط mailto داخل Apple Mail وليس في متصفحات الويب. هذا المقتطف يحلها لـ صفحات الويب، لكن محتوى البريد مختلف.

لروابط البريد (رسائل HTML)

إذا أردت إصلاح روابط mailto في رسائل HTML التي ترسلها:

1. قبل إرسال البريد، مرّر HTML عبر المحوّل
2. أو أرسل روابط لنموذجك بدلاً من روابط mailto

مثال محتوى البريد:

<!-- Instead of -->
<p>Reply to this email or <a href="mailto:support@example.com">contact support</a></p>

<!-- Use -->
<p>Reply to this email or <a href="https://supportretriever.com/form/your-form-id">contact support</a></p>

قائمة التحقق للاختبار

• نشر المقتطف على موقعك
• اختبار النقر على الروابط في Safari على iPhone
• اختبار النقر على الروابط في متصفحات سطح المكتب
• إرسال بريد تجريبي يحتوي رابط النموذج (وليس mailto)
• فتح البريد في بريد iPhone
• النقر على رابط النموذج من البريد
• التحقق من فتح النموذج في Safari
• اختبار إرسال النموذج
• التحقق من وصول الإشعار

مواضيع ذات صلة

• Fix mailto links not opening on iPhone Mail
• How to replace mailto links with a spam-protected نموذج الاتصال
• WordPress: replace mailto links site-wide in minutes
• Using metadata in النموذج URLs