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

Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on facebook
Facebook
Share on telegram
Telegram

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

Crea un botón o enlace en tu web para que te manden un email con solo un clic

También te puede interesar:

¿Qué es un Header y cómo podemos mejorarlo?

Mejores cursos SEO gratis y de pago


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, me encantaría leer tu opinión

¿Te gustó este Post? Compártelo en tus Redes Sociales

Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on facebook
Facebook
Share on telegram
Telegram

Autor: Jonathan Vélez

Mi nombre es Jonathan Vélez, soy Formador de Marketing Digital, Consultor especializado en SEO y Diseño web y creo contenido en mi blog para ayudaros con vuestros proyectos.

Soy un apasionado del SEO y la Formación

«El tiempo pone a cada uno en su lugar… bueno, si tienes una estrategia quizás un poco más arriba»

Artículos Destacados

¡Recurso Gratuito!

Si eres diseñador web… o quieres serlo

La Hoja de Ruta para estabilizar tus ingresos con clientes recurrentes y que tu negocio de diseño web sea rentable.

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

16 respuestas

  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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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.

¿QUIERES MÁS INFORMACIÓN!?

te llamamos gratis

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