Cómo Crear un Enlace Mailto en HTML para enviar emails con 1 clic

Vicente
junio 16, 2025
No hay comentarios

En el mundo digital de hoy facilitar que la gente te contacte no es un lujo, es una necesidad. Queremos respuestas rápidas, soluciones sencillas y si es posible que todo sea a un clic.

Aquí es donde el enlace mailto entra en juego, una herramienta simple pero potente para conectar directamente. ¿Sabes cómo funciona y cómo implementarlo en tu web?

Vamos a verlo, sin rodeos, con los pies en la tierra.

Que es un enlace mailto y por qué lo necesitas

Vamos al grano…

Un enlace mailto es un tipo de enlace HTML que al hacer clic abre automáticamente el programa de correo electrónico predeterminado del usuario.
Pero no solo eso, ¡ya lo deja preparado con la dirección de correo del destinatario!, se acabó lo de copiar, pegar y buscar la aplicación, es un atajo directo a tu bandeja de entrada o a la de quien tú quieras.

Su función principal es clara, facilitar el contacto directo con un destinatario específico sin que el usuario tenga que hacer malabares con direcciones o empezar un mensaje desde cero.

Beneficios directos de usar enlaces mailto:

Contacto Eficiente: Un solo clic y el usuario ya está listo para enviar el email. Menos pasos, menos dudas.
Mejora la Experiencia del Usuario (UX): Al simplificar el proceso, haces la vida más fácil a tus visitantes, y eso siempre se valora.
Potencial en Estrategias de Marketing: Ideal para llamadas a la acción en campañas o para que tu audiencia se comunique contigo en un instante.

Un detalle importante a recordar es que el comportamiento del enlace mailto dependerá de la configuración que cada usuario tenga en su equipo para su cliente de correo, puede que abra Outlook, Gmail en el navegador, o la aplicación de Mail en un móvil. Tú lo pones, ellos eligen con qué abrirlo.

La sintaxis básica para crear un enlace mailto en HTML

Crear este tipo de enlace es sencillo y se basa en la conocida etiqueta <a> (de «anchor» o ancla), que usas para cualquier otro link en HTML, la diferencia está en el valor de su atributo href.

La estructura fundamental es esta:

HTML


        <a href="mailto:tu.email@ejemplo.com">Texto visible del enlace</a>

Desglosemos cada componente para que no quede ni una duda:

<a: La etiqueta de apertura para definir el enlace.
href=»mailto:tu.email@ejemplo.com»: El corazón del enlace. Aquí le indicas al navegador que es un enlace de correo.
- mailto:: El protocolo que le dice al navegador «¡abre un cliente de correo!».
- tu.email@ejemplo.com: La dirección de correo electrónico a la que se enviará el mensaje. Pon tu dirección o la del departamento que deba recibirlo.
>Texto visible del enlace<: Lo que el usuario verá y sobre lo que hará clic en tu página. Sé claro y conciso, como «Enviar Consulta» o «Contactar Soporte».
</a>: La etiqueta de cierre del enlace.

Ejemplo Práctico:

Si quieres que los visitantes te escriban a info@tudominio.com, el código sería así:

HTML


        <a href="mailto:info@tudominio.com">Enviar un correo a nuestro equipo</a>

Al hacer clic en «Enviar un correo a nuestro equipo», se abrirá el cliente de correo del usuario listo para componer un mensaje a info@tudominio.com, Así de efectivo.

Personaliza tu enlace mailto añadiendo asunto y contenido

Aquí es donde el enlace mailto se vuelve realmente potente y útil, no solo puedes pre-rellenar la dirección, sino también el asunto del correo, el cuerpo del mensaje e incluso añadir copias (CC y BCC). Esto se logra añadiendo parámetros específicos después de la dirección de correo.

Para añadir el primer parámetro, usa el signo de interrogación (?). Para cada parámetro adicional, utiliza el signo ampersand (&) para separarlos.

Establecer un asunto predeterminado (?subject=)

Define el asunto del correo para que el remitente ya sepa de qué va la conversación, esto es genial para organizar tus emails.

Sintaxis:

HTML


        <a href="mailto:destinatario@email.com?subject=Asunto del Correo">Enviar Correo</a>

Consejo Clave: Si tu asunto contiene espacios debes reemplazarlos con %20. Es la codificación estándar para URLs.

HTML


        <a href="mailto:ventas@miempresa.com?subject=Consulta%20sobre%20producto%20X">Consultar sobre Producto X</a>

Incluir un cuerpo de mensaje predefinido (?body=)

Pre-rellena el contenido del mensaje. Ideal para solicitar información específica o guiar al usuario sobre qué escribir.

Sintaxis:

HTML


        <a href="mailto:destinatario@email.com?body=Cuerpo del Mensaje">Enviar Mensaje</a>

¡Truco útil! Para incluir saltos de línea (como un «Enter») dentro del cuerpo del mensaje, utiliza %0A.

HTML


        &lta href="mailto:soporte@miempresa.com?body=Hola,%20tengo%20un%20problema%20con...%0AMi%20nombre%20es:%20%0AMi%20telefono%20es:">Contactar Soporte Técnico</a>

Añadir direcciones en copia (CC) (?cc=)

Permite que una copia del correo se envíe a otra dirección, visible para todos los destinatarios.

Sintaxis:

HTML


        &lta href="mailto:destinatario@email.com?cc=copia@email.com">Enviar con CC</a>

Para múltiples direcciones en CC, sepáralas con una coma (,).

HTML


        &lta href="mailto:destinatario@email.com?cc=cc1@email.com,cc2@email.com">Enviar con CC a Varios</a>

Incluir direcciones en copia oculta (BCC) (?bcc=)

Funciona igual que el CC, pero las direcciones añadidas aquí no serán visibles para el resto de los destinatarios. Perfecto para seguimiento interno.

Sintaxis:

HTML


        &lta href="mailto:destinatario@email.com?bcc=copia_oculta@email.com">Enviar con BCC</a>

También puedes añadir múltiples direcciones BCC separadas por comas.

Combinación de parámetros, el poder total del mailto

Puedes combinar todos estos parámetros para crear enlaces mailto muy específicos y funcionales. Recuerda: ? para el primer parámetro, & para todos los siguientes.

Vamos ha hacer un ejemplo práctico, te voy a dejar a continuación un enlace para que veas en primera persona como funciona un mailto: Envíame un email

Ejemplo completo:

HTML


        &lta href="mailto:contacto@tuempresa.com?subject=Solicitud%20de%20Informacion%20Web&body=Estimados,%0AMe%20gustaria%20saber%20mas%20sobre%20[producto/servicio].%0AAtentamente,%0A[Tu%20Nombre]&cc=ventas@tuempresa.com&bcc=leads@tuempresa.com">Enviar Solicitud de Información</a>

Este enlace al ser clicado abriría un correo a contacto@tuempresa.com con un asunto claro, un cuerpo de mensaje predefinido con saltos de línea y copias a los equipos de ventas y leads de forma oculta. ¡Máxima eficiencia!

Claves para un uso efectivo del enlace mailto

Para que tus enlaces mailto sean realmente útiles y no te den dolores de cabeza, ten en cuenta estos puntos:

Codificación URL: Insisto, es vital. Además de %20 para espacios, cualquier carácter especial (como ñ, acentos, &, etc.) en el asunto o cuerpo del mensaje debe ser codificado correctamente, si te resulta complicado usa una herramienta online.
Piensa en la Experiencia del Usuario:
- Claridad ante todo: Deja claro qué va a pasar al hacer clic. Un texto como «Enviar correo» o un icono de sobre es directo.
- Ofrece Alternativas: No todo el mundo usa clientes de correo de escritorio, muchos prefieren formularios de contacto. Ofrecer ambas opciones es lo ideal para no perder ni un contacto.
Consideraciones de Seguridad (Spam): Al mostrar tu dirección de correo en el código HTML los «bots» de spam pueden rastrearla, si el spam es una preocupación seria, un formulario de contacto con protecciones como reCAPTCHA es una alternativa más segura.
Longitud de la URL: Aunque es raro, enlaces mailto con cuerpos de mensaje excesivamente largos pueden tener problemas en algunos clientes de correo. Intenta ser conciso.

Generadores de Enlaces Mailto

Para evitar errores en la codificación y simplificar el proceso te recomiendo usar generadores de enlaces mailto online, son muy sencillos, introduces la dirección, el asunto, el cuerpo, etc. y la herramienta te entrega el código HTML listo para copiar y pegar con toda la codificación hecha. Es una forma de asegurar que todo esté perfecto.

Creando un enlace mailto en WordPress

Bueno, pues ahora que ya sabemos que es un enlace mailto en html, vamos a crear el nuestro en nuestra web. Pero no te eches las manos a la cabeza que no vamos a programar en html ni nada por el estilo…

Vamos a crear nuestro link mailto desde el editor:

Enlace mailto con el editor clásico de WordPress

Lo primero es lo primero… abrimos nuestro editor de WordPress y escribimos el texto que queremos que tenga ese enlace (hablemos, contáctame…) y le damos al botón de añadir enlace, se nos habre un cuadro donde ponemos nuestro email empezando por mailto: y ya tenemos nuestro enlace preparado para que abra directamente el gestor de correo de nuestro interesado.

Enlace mailto con el editor de bloques de WordPress

En el caso de que usemos el editor de bloques, se hace de una forma similar, escribimos el texto que queremos que se vea y pulsamos sobre insertar enlace. Aquí ponemos nuestro enlace tal y como hemos aprendido ej: mailto:info@vicentemerino.com.

Si lo queremos incluir en un botón es similar, añadimos el botón y en la caja para colocar el enlace de destino ponemos nuestro mailto: y listo, ya tenemos nuestro email de contacto listo para que se abra directamente en un gestor de correo.

Creando un enlace mailto con Elementor

Si usamos Elementor… aún lo tenemos más fácil, porque estos enlaces mailto se usan en botones, listas de iconos … y hay algo que todos ellos tienen en común, todos tienen la opción de poner un enlace y es ahí donde entra nuestro ya conocido mailto:, en este hueco que nos dan esos elementos… ponemos mailto:info@tuempresa.com y ya estará configurado para que al hacer clic encima de él… abra directamente el gestor de correo configurado en el PC del usuario.

Con estos tips ya podemos crear nuestros enlaces como churros con cualquier editor que usemos sin quebraderos de cabeza.

Aunque si por alguna causa tenemos algún problema o duda, a continuación vemos a que puede ser debido.

Solventando problemas comunes con enlaces mailto

Si tu enlace mailto no se comporta como esperas puede que sea por esto:

El enlace no hace nada al hacer clic:
- Posible Causa: El usuario no tiene un programa de correo predeterminado configurado en su sistema operativo o navegador.
- Solución: Esto no lo puedes controlar con código. La mejor práctica es siempre ofrecer un formulario de contacto como opción alternativa.
Espacios o caracteres especiales aparecen mal en el correo:
- Posible Causa: Falta de codificación URL correcta (%20 para espacios, %0A para saltos de línea, etc.).
- Solución: Verifica que todos los caracteres especiales estén codificados. Usa un generador de enlaces mailto para asegurarte.
El enlace abre un programa de correo que no es el esperado (ej. Gmail en lugar de Outlook):
- Posible Causa: El programa que se abre es el que el usuario tiene configurado como predeterminado en su sistema o navegador.
- Solución: Es un comportamiento normal y esperado, no puedes forzar la apertura de un programa específico desde el código HTML del enlace mailto.

Preguntas frecuentes (FAQ) sobre enlaces mailto

¿Se pueden adjuntar archivos con un enlace mailto?

No, directamente a través del enlace mailto en HTML no es posible especificar o adjuntar archivos. El protocolo está diseñado para pre-rellenar texto y direcciones. Si se necesita adjuntar algo, el usuario tendría que hacerlo manualmente una vez que se abra el cliente de correo.

¿Los enlaces mailto funcionan en todos los navegadores y dispositivos?

Sí, el protocolo mailto es un estándar web bien establecido y es compatible con la inmensa mayoría de navegadores modernos (Chrome, Firefox, Edge, Safari) y sistemas operativos (Windows, macOS, Linux, Android, iOS). El único factor variable es qué cliente de correo se abre, que depende de la configuración del usuario.

¿Es seguro exponer mi email con un enlace mailto?

Desde la perspectiva del usuario, el enlace es seguro. Sin embargo, para el propietario de la web, la principal desventaja es que tu dirección de correo electrónico es visible en el código fuente de la página. Esto puede hacerla más vulnerable a ser capturada por bots de spam que rastrean la web. Para situaciones que requieran mayor seguridad o para minimizar el spam, un formulario de contacto es una opción más robusta.

¿Cómo añado saltos de línea en el cuerpo del mensaje de un enlace mailto?

Para incluir saltos de línea en el cuerpo (body) de tu enlace mailto, utiliza el código de codificación URL %0A. Por ejemplo, ?body=Primera%20linea%0ASegunda%20linea.

¿Puedo hacer que un enlace mailto abra directamente Gmail o Outlook.com en el navegador?

El enlace mailto instruye al sistema a abrir el cliente de correo predeterminado. Si el usuario tiene Gmail o Outlook.com configurado como su cliente de correo predeterminado en su navegador, entonces sí se abrirá. De lo contrario, abrirá la aplicación de escritorio configurada o el cliente web que el sistema tenga por defecto.

Conecta directo y sin complicaciones

En resumen, el enlace mailto es una herramienta sencilla pero increíblemente potente para facilitar la comunicación y mejorar la experiencia de usuario en cualquier sitio web. Permite a tus visitantes iniciar una comunicación directa con un solo clic, pre-rellenando los datos clave y eliminando fricciones.

Aunque es importante tener en cuenta la exposición de la dirección y ofrecer alternativas, dominar la creación y personalización de los enlaces mailto te da una flexibilidad enorme. Implementarlos correctamente te ayudará a optimizar la interacción de tus usuarios y la eficiencia de tu comunicación online.

¡Es hora de ponerlos en práctica!