Fragmento para copiar y pegar: Sustituir todos los mailto por un formulario de contacto

Fragmento JavaScript que convierte automáticamente los enlaces mailto en tu formulario de contacto en todo el sitio.

El fragmento

Versión básica

Sustituye todos los enlaces mailto al cargar la página:

// Replace all mailto links with contact form
(function() {
  // URL de tu formulario 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');
    }
  });
})();

Cómo funciona

1. Localiza todos los mailto con a[href^="mailto:"]
2. Extrae la dirección de cada enlace
3. Sustituye href por la URL de tu formulario
4. Mantiene el texto visible sin cambios
5. Añade atributos data para seguimiento

Antes y después

Antes (HTML):

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

Después (renderizado):

<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>

El usuario ve: El mismo texto del enlace, pero al hacer clic se abre el formulario en lugar del cliente de correo.

Versión avanzada con opciones

Con enrutamiento por departamento

Extrae el departamento del correo y añádelo a la URL del formulario:

(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');
    }
  });
})();

Resultado:

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

Con seguimiento de fuente

Añade un parámetro origen según la página:

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

Con integración de analíticas

Registra conversiones en 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');
        }
      });
    }
  });
})();

Opciones de seguridad

Excluir enlaces concretos

No convertir ciertos mailto:

(function() {
  const FORM_URL = 'https://supportretriever.com/form/your-form-id';
  
  // Correo electrónicos to exclude from conversion
  const excludeCorreo electrónicos = [
    '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 && !excludeCorreo electrónicos.includes(emailMatch[1])) {
      link.setAttribute('href', FORM_URL);
      link.setAttribute('data-original-email', emailMatch[1]);
      link.setAttribute('data-converted', 'true');
    }
  });
})();

Uso:

<!-- Este se convertirá -->
<a href="mailto:support@example.com">Contáctanos</a>

<!-- Este NO se convertirá (tiene la clase) -->
<a href="mailto:personal@example.com" class="keep-mailto">Correo personal</a>

<!-- Este NO se convertirá (atributo data) -->
<a href="mailto:john@example.com" data-keep-mailto="true">Correo de John</a>

Añadir respaldo

Ofrecer alternativa si el formulario no carga:

(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(
            '¿Problemas para abrir el formulario? Haz clic en Aceptar para usar el correo.'
          );
          if (fallback) {
            window.location.href = originalHref;
          }
        }, 5000);
      });
    }
  });
})();

Instrucciones de instalación

Sitio HTML estático

Añade antes del cierre de </body>:

<!DOCTYPE html>
<html>
<head>
  <title>Tu sitio</title>
</head>
<body>
  
  <!-- Tu contenido con enlaces mailto -->
  <a href="mailto:support@example.com">Contáctanos</a>
  
  <!-- Añade el script antes del cierre de body -->
  <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

Método 1: Pie del tema

1. Ve a Apariencia → Editaror del tema
2. Abre footer.php
3. Añade el script antes de la etiqueta </body>
4. Guarda los cambios

Método 2: Plugin (Code Snippets)

1. Instala el plugin Code Snippets
2. Añade un nuevo snippet
3. Pega el script (sin etiquetas <script>)
4. Configura para ejecutarse en Frontend
5. Activa el snippet

Método 3: Plugin personalizado

Crea wp-content/plugins/replace-mailto/replace-mailto.php:

<?php
/**
 * Plugin Nombre: Replace mailto Links
 * Descripción: 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');

Activa el plugin en el admin de WordPress.

Webflow

1. Ve a Configuración del proyecto
2. Pestaña Código personalizado
3. Baja hasta Código del pie
4. Pega el script con etiquetas <script>
5. Publica el sitio

<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. Ve a Tienda online → Temas
2. Acciones → Editarar código
3. Abre theme.liquid
4. Añade el script antes de </body>
5. Guarda los cambios

Squarespace

1. Ve a Configuración → Avanzado → Inyección de código
2. Pega en la sección Pie
3. Guarda los cambios

React/Next.js

Crea un hook o componente:

// 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>;
}

Pruebas

Comprobar que funciona

1. Revisa la consola por errores:

// Añade al fragmento para depurar
console.log('mailto replacement script loaded');
console.log('Found ' + mailtoLinks.length + ' mailto links');

2. Inspecciona enlaces convertidos:

// Comprueba qué se convirtió
document.querySelectorAll('[data-converted="true"]').forEach(link => {
  console.log('Converted:', link.getAttribute('data-original-email'));
});

3. Prueba primero en staging:

• Despliega en un entorno de pruebas
• Revisa todas las páginas con mailto
• Haz clic en cada enlace convertido
• Comprueba que el formulario se abre bien

4. Comprueba en iPhone Mail:

• Envía un correo de prueba con enlace mailto
• Ábrelo en iPhone Mail
• Pulsa el enlace
• Comprueba que se abre el formulario (no el cliente de correo)

Comprobar que funciona en iPhone Mail

Por qué importa

El problema de mailto en iOS 26.1 ocurre al pulsar enlaces mailto en Apple Mail, no en el navegador. Este fragmento lo resuelve en páginas web; el contenido de correos es distinto.

Para enlaces en correos (correos HTML)

Si quieres arreglar mailto en correos HTML que envías:

1. Antes de enviar, pasa el HTML por el convertidor
2. O envía enlaces a tu formulario en lugar de mailto

Ejemplo de contenido de correo:

<!-- En lugar de -->
<p>Responde a este correo o <a href="mailto:support@example.com">contactar soporte</a></p>

<!-- Usa -->
<p>Responde a este correo o <a href="https://supportretriever.com/form/your-form-id">contactar soporte</a></p>

Lista de comprobación

• Despliega el fragmento en tu web
• Prueba hacer clic en los enlaces en Safari en iPhone
• Prueba en navegadores de escritorio
• Envía un correo de prueba con enlace al formulario (no mailto)
• Abre el correo en iPhone Mail
• Pulsa el enlace al formulario desde el correo
• Comprueba que el formulario se abre en Safari
• Prueba el envío del formulario
• Comprueba que llega la notificación

Temas relacionados

• Arreglar mailto que no se abren en iPhone Mail
• Sustituir mailto por un formulario con protección anti-spam
• WordPress: sustituir mailto en todo el sitio en minutos
• Usar metadatos en las URLs del formulario