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.
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
- Guía de enlaces html en WordPress
- Cómo crear un enlace html para llamar por teléfono en tu web
- Cómo crear enlaces ancla en html para navegar verticalmente en la web
- Tutorial en vídeo para crear un link de descarga directa desde nuestro WordPress
- Más info en: https://www.w3schools.com/html/
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!!