Cómo hacer que se abra tu gestor de email al pulsar un link con tu correo de contacto

Seguro que en más de una ocasión has querido poner un link en tu web con un correo y que cuando la persona pinche ese link se abra el correo y quede todo preparado para enviar ese email. O lo que es lo mismo, crear un enlace mailto.

Pues es muy simple de implementar. Lo puedes ver en vídeo en un par de minutos. Ó mira a continuación los pasos y el código que necesitas si lo prefieres.

Si utilizas Genesis Framework tienes un minicurso del plugin Genesis Simple Social Icons en el que hay 2 iconos muy interesantes: el de mail y el de llamar por teléfono. Es lo mismo de este tutorial y el de llamar que tienes también en mi blog. Pero más rápido y con un icono en vez de texto.

Cómo crear un enlace mailto que abra tu gestor de correo al hacer clic

Si lo prefieres, aquí te dejo los pasos.

1.- Crea un link en html

Para crear un link en html sólo tienes que escribir lo siguiente en tu documento de html o si estás usando WordPress podrías hacerlo en una entrada o página pulsando la pestaña de html del editor de texto.

crear link que abra el correo

También podrías ponerlo en un widget de html.Éste es el código para crear un enlace en html:

<a href="#">Aquí el texto que quieras</a>

2.- Añadir el mailto para que se abra el correo

Ahora sólo hay que añadir lo siguiente a la url de nuestro enlace:

<a href="mailto:elcorreoquequieres@correo.com">Aquí el texto que quieras</a>

3.- Añadir el asunto automáticamente a ese correo

Y si quieres, y esto es totalmente opcional, puedes hacer que quede un asunto en el correo de forma automática. Yo lo utilizo para saber desde que enlace me contactan. Sería así:

<a href="mailto:elcorreoquequieres@correo.com?Subject=Aquí%20el%20asunto%20del%20mail">Aquí el texto que quieras</a>

NOTA: No olvides utilizar %20 para separar las palabras de tu asunto para que todos los gestores de correo respeten los espacios.

Te pongo un ejemplo. Mira, prueba este link y fíjate que queda con asunto y todo: Contactar por correo

Su código sería:

<a href="mailto:rafa@gmail.com?Subject=Interesado%20en%20el%20curso">Contactar por correo</a>

Contenidos relacionados que pueden interesarte

Y hasta aquí este sencillo tutorial de html. Espero que te haya gustado 🙂 Si es así, y te apetece, puedes ayudarme compartiéndolo en la red social que prefieras. ¡Gracias!!

YouTube video
Ilustración de Aprender WordPress gratis en mi canal de youtube

👨🏻‍🏫 Aprende gratis en mi canal de Youtube

En 2024 he vuelto a Youtube para liberar todo mi conocimiento de estos años formando diseñadores web.
Únete al canal

🛠️ Recursos relacionados

Ver todos
Inicia sesión

Sólo los socios del club de expertos pueden utilizar esta funcionalidad.