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.

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.

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

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:

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

19 comentarios

  1. 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! 🙂

    1. Muchas gracias Àngela por el comentario.

      Si que para el usuario es muy cómodo que una web tenga enlaces mailto y creo que ahí está la clave para mejorar la conversión de la web.

      Un saludo

  2. 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?

    1. Así tal cual está en el artículo abrirá su gestor de contenidos sea cual sea (incluido gmail) y apuntará al email que tú pongas en el enlace, sea cual sea. Eso pasará si su gestor predeterminado es gmail, si es otro, abrirá el otro.

      Un saludo

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

    Muchas gracias y sobre todo por esas chuletillas en HTML 🙂

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

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

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

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Responsable: Jonathan Vélez
Finalidad: Gestión de los comentarios de las publicaciones
Legitimación: Consentimiento del interesado
Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal. Los boletines electrónicos o newsletter están gestionados por entidades cuya sede y servidores se encuentran dentro del territorio de la UE
Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional.

Únete a nuestra comunidad marketera en Discord

Contenidos exclusivos. recursos, networking y muchas cosas más exclusivas en nuestra comunidad.

¡¡Ya somos más de 350!!

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad