Cómo hacer que se abra tu gestor de correo al pulsar un enlace con tu email [Enlace Mailto en html]

Compartir este artículo:

Muchas veces hemos querido contactar con algún sitio web de forma directa sin tener que estar haciendo un copia y pega con el email en nuestro gestor de correo.

Lo que vamos a aprender en este pequeño artículo es algo que ya habéis visto muchísimas veces en diferentes páginas web, incorporan un botón o el correo electrónico, que cuando hacéis clic, de repente, se os abre el gestor de correo ya listo con la dirección de email para escribir y enviar, pues esto es un enlace mailto.

Vamos a aprender cómo hacer un enlace mailto en HTML de forma muy sencilla y paso a paso incluso si no tienes ni idea de código.

¿Listos? Rock&Roll

Cómo crear un enlace mailto que lleve al usuario a mandarte un email paso a paso

Vamos a ponernos el mono de trabajo y aprender a crear un enlace mailto, es muy sencillo, pero vamos paso a paso:

Crea el link html

El primer paso es crear tu enlace html, para hacerlo hay que usar el siguiente código:

<a href=»aquí-va-la-url»>Aquí el texto que aparecerá en el enlace</a>

Añade mailto: para que abra el correo

Ahora lo único que tienes que hacer es añadir mailto: a la url del enlace, para que el enlace funcione abriendo el gestor de correo con nuestro email preparado.

<a href=»mailto:tucorreo@tudominio.com»>Aquí el texto que quieras</a>

Para los que quieran cotillear las partes del código:

El principio de la etiqueta: <a href= significa que vamos a crear un enlace y dicha dirección estará ubicada después del símbolo =.

La dirección: «mailto:tucorreo@tudominio.com»> esto va después del símbolo =, va entre comillas y comienza con el atributo mailto seguido del correo electrónico al que se hará la acción (esto es como decir envía a este email el correo).

Texto del enlace o anchor text: este es el texto que ser verá en el enlace, en el ejemplo sería «Aquí el texto que quieras».

Y por último hay que cerrar con la etiqueta: </a>  no puede faltar pues con él se indica que ya el enlace está listo para ser utilizado. Como algún listo se habrá dado cuenta, siempre hay que cerrar lo que abrimos en código, en este caso como usamos <a> al principio, debemos cerrar con </a> al final.

Añade un asunto personalizado al correo

Una opción que tienes, si quieres, es dejar «programado» un asunto de forma automática para el email cuando abran tu enlace, para esto solo hay que añadir lo siguiente a nuestro enlace:

<a href=»mailto:tucorreo@tudominio.com?
Subject=Asunto%20del%20mail»>Aquíeltextoquequieras</a>

¡OJO!

Tienes que poner «%20» para separar cada palabra del asunto, para que todos los gestores de correo lo lean y respeten los espacios.

Te voy a poner un ejemplo, prueba el enlace y mira como queda: Envíame un correo

El código de este enlace de ejemplo sería:

<a href=»mailto:info@jonathanvelez.com?
Subject=Información%20sobre%20el%20curso%20de%20Diseño%20Web»>Envíame un correo</a>

¿No sabes html? Crea un enlace mailto sin saber código usando el editor de WordPress

Llegados a este punto, habrá más de uno diciendo: pero Jonathan, para mí esto del código me suena a chino profundo, ¿no hay una forma más fácil de hacerlo sin tanto rollo?… pues sí, lo hay.

Puedes crear un enlace html aunque no tengas ni idea de código y de una forma muy sencilla usando el editor de texto del mismo WordPress de tu página web. El procedimiento es muy sencillo, vamos paso a paso:

Primero crea un link o enlace en WordPress. Es tan fácil como escribir el texto que quieras que contenga el enlace, seleccionarlo y darle a la opción «insertar/editar un enlace» en el panel de herramientas de edición de texto del mismo WordPress.

enlace mailto html

En la pestaña que te aparece pones la Url hacia donde quieres que apunte el enlace, en este caso debes escribir tu dirección de email comenzando con «mailto:» y le das a aceptar, por ejemplo: «mailto:info@jonathanvelez.com»

Con esto tienes creado el enlace, ahora solamente tienes que seleccionarlo y cambiar la vista a HTML, en la pestaña de arriba a la derecha de tu editor de texto en WordPress. Con esto podréis ver el hmtl de lo que llevéis escrito hasta ahora.

Como hemos seleccionado el enlace antes de cambiar de vista, en el modo HTML nuestro enlace se verá seleccionado, para poder encontrarlo y copiarlo fácilmente.

enlace mailto html wordpress

¡Bien hecho! Yo confié en ti desde el principio 😀

Cómo hacer un enlace mailto con Elementor Pro

Si usamos Elementor Pro en nuestra web, crear un enlace que abra nuestro gestor de correo es aún más fácil.

Si lo pensamos, este tipo de enlace se pone en elementos de cabecera, lista de iconos o botones y todos ellos tienen un hueco donde poner un enlace.

enlace mailto elementor pro

Pues es tan simple como poner por enlace: mailto:tucorreoelectronico.com (en mi caso sería mailto:info@jonathanvelez.com) y ya está, en cuanto pulsen el botón o el enlace, se abrirá el gestor de correo listo para enviar el email.

Mucho más sencillo que con código, eh.

Conclusión

Incorporar enlaces mailto en tu web para que a una persona se le abra el gestor de correo listo para enviarte un email es una buena estrategia para facilitar el contacto, y de camino, mejorar la conversión de nuestra página web.

Este enlace lo podemos crear de forma muy sencilla en HTML, pero recuerda que podemos usar el editor de WordPress para no tener que escribir el código o usar el constructor visual de nuestra web (tipo elementor) para ponerlo aún más fácilmente.

¿Y tú?, ¿Tienes en tu web botones o enlaces para que te escriban un correo directamente?

¿Crees que podría ser interesante para tu proyecto?

Déjame un comentario abajo, me encantaría leer tu opinión

Compartir este artículo:

Ya que estamos, quizás te interese:

Sobre el autor:

Jonathan Vélez
Jonathan Vélez
Soy Formador de Marketing Digital, Consultor especializado en SEO y Diseño web. Me encanta viajar, los deportes acuáticos y las pelis frikis.

Comentarios del post - Anímate y cuéntame qué te ha parecido

Suscribirse
Avisar de
guest
19 Comentarios
más viejos
más nuevos
Inline Feedbacks
Ver todos los comentarios
Estivaliz
Estivaliz

Me parece súper interesante lo del enlace Mailto, voy a aplicarlo ahora mismo!
Muchas gracias!

Àngela Vivó
Àngela Vivó

Gracias por el artículo.
La verdad es que como usuaria me resulta muy cómodo este tipo de enlace mailto para que se abra directamente el gestor de correo y te manden directamente el email. Es un fastidio tener que copiar y pegar la dirección de correo.
En cuanto tenga mi web, seguro que lo pongo! 🙂

Alba Fragoso
Alba Fragoso

No sabía que se podía hacer de esta forma tan directa, me lo apunto en mi cuaderno Marketero!

Oscar Cortes
Oscar Cortes

Hola Jonathan, gracias por este artículo ya que no lo había aplicado nunca y me vendrá genial en un futuro. Tengo una duda: ¿Cómo podría hacer que el mismo botón/enlace no les abra mi dirección de email sino que directamente les lleve a su Gmail por ejemplo?

Raquel
Raquel

Lo hacía con un plugin…así mucho mejor la verdad. Optimizando…Gracias Jonathan!

Alex Castro
Alex Castro

La verdad que el enlace mailto facilita mucho la experiencia de usuario 😀

Muchas gracias y sobre todo por esas chuletillas en HTML 🙂

Nagore
Nagore

Buenas Jonathan,
No había tenido en cuenta esta técnica de incorporar enlaces mailto en la web para que a una persona se le abra el gestor de correo listo para enviarte un email, y sin duda es una buena estrategia para facilitar el contacto, y de camino, mejorar la conversión de nuestra página web, como bien dices.

Muchas gracias, tomo nota.
Nagore García Sanz

toñi rodriguez navas
toñi rodriguez navas

Muy útil Jonathan ¿Cómo crear un enlace mailto con hml para abrir el correo?

No sabia crear un enlace mailto para que cuando hagan clic en un enlace, se abra el email directamente.

Un saludo

Jorge Gijon
Jorge Gijon

La verdad que saber cómo crear un enlace mailto siempre viene bien, porque puede sacarnos de más de un apuro, o que el cliente necesito ponerlo en la web, y no se aclare.

Muy útil.
Saludos, Jorge Gijon.

Monica
Monica

Muchas gracias por su aportación siempre viene bien crear un enlace mailto. Qué pasa si en lugar de ponerlo en tu web quieres colocar un enlace en la historia de tu Instagram en ese caso como se introduciría la url?

19
0
👈 Déjame un comentariox
Utilizamos cookies propias y de terceros para el análisis de tus hábitos de navegación, mostrarte publicidad relacionada con tus gustos e intereses e interactuar en redes sociales.    Configurar y más información
Privacidad