La Guía Definitiva de Enlaces Mailto: Sintaxis, Parámetros e Implementación

¿Qué es un enlace Mailto? (Y por qué deberías usarlo)

Un enlace mailto es un tipo de enlace HTML que activa el cliente de correo electrónico predeterminado del usuario para empezar a redactar un nuevo correo. Es un esquema de URI (Uniform Resource Identifier) para direcciones de correo electrónico, estandarizado en RFC 6068.

En lugar de llevar a un usuario a otra página web, un enlace mailto abre una ventana de “Nuevo Correo”, con la dirección de correo electrónico del destinatario ya completada.

Ventajas:

• Simplicidad: Es la forma más sencilla de permitir que los visitantes envíen un correo electrónico.
• Sin backend: No requiere procesamiento del lado del servidor, a diferencia de los formularios de contacto.
• Familiaridad: Los usuarios interactúan con su propio cliente de correo, con el que están familiarizados.

Desventajas:

• Dependencia del cliente: Requiere que el usuario tenga un cliente de correo configurado en su dispositivo.
• Spam: Las direcciones de correo electrónico en texto plano pueden ser recolectadas por bots de spam.

La Anatomía de un Enlace Mailto: De lo Simple a lo Complejo

Lo Básico: mailto:[email protected]

La forma más simple de un enlace mailto solo incluye la dirección de correo del destinatario.

<a href="mailto:[email protected]">Contáctanos</a>

Añadiendo un Único Parámetro: El Signo de Interrogación ?

Para añadir parámetros como un asunto o cuerpo, se empieza con un signo de interrogación (?) después de la dirección de correo. El primer parámetro es típicamente subject.

<a href="mailto:[email protected]?subject=Consulta sobre el producto">Enviar consulta</a>

Añadiendo Múltiples Parámetros: El Ampersand &

Para añadir más de un parámetro, se separan con un ampersand (&).

<a href="mailto:[email protected]?subject=Consulta sobre el producto&body=Hola, estoy interesado en...">Enviar consulta detallada</a>

Importante: Solo el primer parámetro usa ?. Todos los subsiguientes deben usar &.

Un Vistazo Profundo a Todos los Parámetros de Mailto

Esta es la parte central del artículo. Cada parámetro incluye ejemplos de código.

subject: Pre-rellenar la Línea de Asunto

Pre-rellena el asunto del correo. Recuerda codificar los caracteres especiales. Por ejemplo, un espacio se convierte en %20.

<a href="mailto:[email protected]?subject=Solicitud%20de%20Cotización">Solicitar Cotización</a>

body: Pre-rellenar el Texto del Cuerpo y Manejar Saltos de Línea (%0A)

Pre-rellena el cuerpo del correo. Este es el parámetro más propenso a errores debido a la codificación. Los saltos de línea deben ser codificados como %0A.

Ejemplo con salto de línea:

<a href="mailto:[email protected]?subject=Reporte%20de%20Error&body=Mi%20cuenta%0A---%0ADetalles%20del%20error:">Reportar Error</a>

Esto creará un cuerpo de correo que se ve así:

Mi cuenta
---
Detalles del error:

cc y bcc: Añadir Destinatarios en Copia de Carbón y Copia Oculta

Puedes añadir destinatarios en cc (copia de carbón) y bcc (copia oculta).

<a href="mailto:[email protected][email protected]&[email protected]">Enviar reporte</a>

Múltiples Destinatarios: Cómo Añadir Más de una Dirección de Email

Para enviar a múltiples destinatarios en los campos to, cc, o bcc, simplemente sepáralos con una coma (,).

<a href="mailto:[email protected],[email protected]?subject=Esfuerzo%20Conjunto">Contactar a Ventas y Marketing</a>

Poniéndolo Todo Junto: Un Ejemplo del Mundo Real

Aquí hay un ejemplo complejo que combina todos los parámetros.

<a href="mailto:[email protected][email protected]&[email protected]&subject=Asunto%20del%20Correo&body=Este%20es%20el%20cuerpo%20del%20correo.%0ACon%20un%20salto%20de%20línea.">Ejemplo Completo</a>

• mailto:[email protected]: El destinatario principal.
• [email protected]: El primer parámetro, para la copia de carbón, usa ?.
• &[email protected]: El segundo parámetro, para la copia oculta, usa &.
• &subject=Asunto%20del%20Correo: El tercer parámetro, el asunto, usa &. Nota el %20 para los espacios.
• &body=...: El cuarto parámetro, el cuerpo, usa &. Nota el %0A para el salto de línea.

¿Cansado de codificar esto a mano y preocuparte por errores de codificación? Nuestro Generador de Enlaces Mailto gratuito crea enlaces perfectos y sin errores en segundos.

Cómo Crear un Enlace Mailto en tus Entornos Favoritos

Cómo crear un enlace mailto en HTML

El método estándar, usando la etiqueta <a>.

<a href="mailto:[email protected]">Enviar Correo</a>

Cómo añadir un enlace mailto en Markdown

La sintaxis de Markdown para enlaces funciona perfectamente.

[Enviar Correo](mailto:[email protected])

Cómo hacer un enlace mailto usando JavaScript

Puedes crear y manipular enlaces mailto dinámicamente en el DOM.

const email = '[email protected]';
const subject = 'Asunto dinámico';
const mailtoLink = `mailto:${email}?subject=${encodeURIComponent(subject)}`;

// Para redirigir al usuario
window.location.href = mailtoLink;

// O para establecer el href de un enlace existente
const linkElement = document.getElementById('my-contact-link');
linkElement.href = mailtoLink;

Conclusión: Ahora Eres un Maestro de Mailto

Has aprendido la sintaxis, los parámetros y las mejores prácticas para crear enlaces mailto robustos. Son una herramienta poderosa y simple para la comunicación directa. Para asegurarte de que tus enlaces sean siempre perfectos, ¡marca como favorita nuestra herramienta generadora!