Cómo incluir un enlace mailto con HTML para tu web (con ejemplo)

Descubre ahora nuestra guía básica de HTML y CSS para marketers
Pablo Londoño
Pablo Londoño

Publicado:

Trabajar en la gestión del sitio web de tu negocio puede ser una actividad compleja y pesada si no implementas estrategias para automatizar procesos que te permitan mantenerla de la mejor manera.

Cómo incluir un enlace mailto con HTML

Esto significa verificar con frecuencia que la velocidad de carga de la información es rápida; que se despliegan todos sus contenidos desde dispositivos móviles; que su diseño refleja la identidad de marca de tu compañía y que es un canal de comunicación funcional para que tus usuarios se pongan en contacto contigo.

guía gratis

guía básica sobre html y css para marketers

cuéntanos un poco de ti para acceder a la guía

Así como puedes emplear un gestor de contenidos para automatizar muchas de esas tareas o diseñar una página web gratis con una plantilla en línea, también es posible mejorar la interacción con tus clientes en Internet a través de un enlace mailto con HTML.

En este artículo, te diremos cómo hacerlo con un ejemplo para que lo apliques en el sitio web de tu negocio de inmediato y no pierdas ninguna oportunidad de conectar con las personas que lo visitan todos los días. ¡Comencemos!

Qué es mailto en HTML

El enlace mailto en HTML se emplea para crear enlaces de correo electrónico. Con él, podrás especificar una dirección de correo electrónico para que los usuarios, al hacer clic, abran de manera automática un nuevo mensaje listo para enviar desde el servicio de correo predeterminado en su computadora.

Ventajas y desventajas de agregar un enlace mailto en HTML

Ventajas

  • Facilidad de uso: los usuarios pueden hacer clic directamente en el enlace mailto para abrir su plataforma de email y redactar un nuevo mensaje. Con ello, inician la  comunicación por correo de manera rápida y sencilla.
  • Personalización del mensaje: como compañía, puedes predeterminar información en el correo electrónico, como la dirección de destino, el asunto y el cuerpo del mensaje. Esto les servirá a tus clientes a proporcionar la información que necesitas y agilizará el proceso de redacción.
  • Acceso rápido al cliente de correo electrónico: el enlace mailto abre el cliente de correo electrónico predeterminado del usuario, lo que garantiza que usará una interfaz familiar con la que se sentirá cómodo para interactuar.

Desventajas

  • Limitaciones del cliente de correo electrónico: el comportamiento del enlace mailto puede variar según la plataforma de email que utilice el usuario. Algunas de ellas presentan fallas o errores en parámetros, como el asunto o el cuerpo del mensaje predefinido.
  • Dependencia del cliente de correo electrónico: su uso está sujeto a que los clientes tengan ya un programa de correo instalado y configurado en su computadora. Si por el contrario, los usuarios nunca han descargado uno o prefieren las plataformas web, el enlace mailto no funcionará como se espera.
  • Exposición de direcciones de correo electrónico: los enlaces mailto exponen las direcciones de correo electrónico en el código HTML. Esto podría resultar en una mayor exposición al correo no deseado (spam) o a la recolección de direcciones de email por parte de bots.
  • Limitaciones de accesibilidad: algunas personas con discapacidades visuales o problemas de movilidad pueden tener dificultades para emplear enlaces mailto. Por ello, es importante que proporciones alternativas accesibles para todos los usuarios.
<< Guía básica sobre HTML y CSS para marketers [Descargar gratis] >> 

Cuándo utilizar un enlace mailto

Algunos casos en los que es apropiado añadir un enlace mailto son:

  • Enlaces de contacto: si deseas que los visitantes de tu sitio web se comuniquen contigo por correo electrónico, puedes incluir un enlace mailto en tu página de contacto.
  • Respuestas automáticas: si agregaste una opción para que los usuarios soliciten información adicional, realizar consultas o hacer preguntas, emplear enlaces mailto en botones facilitará que tus clientes hagan estas solicitudes.
  • Compartir contenido por correo electrónico: si buscas que los usuarios compartan contenido de tu página por email, puede agregar un mailto con contenido predefinido en el cuerpo del mensaje.

No olvides proporcionar direcciones de correo electrónico válidas y verificar que el enlace es visible y comprensible para los visitantes. Además, asegúrate de garantizar la privacidad de tus usuarios al evitar la exposición innecesaria de direcciones de correo electrónico.

Cómo poner mailto en HTML (ejemplo)

Crea el código de tu enlace mailto

Para comenzar a implementar un enlace mailto en tu página web, deberás emplear su formato básico:


a href="mailto:correo@ejemplo.com">Enviar correo</a

Este enlace se mostrará en tu sitio como «Enviar correo». Al hacer clic en él, se abrirá la plataforma de correo predeterminada de tus clientes con la dirección de email que destines para este tipo de solicitudes: «correo@ejemplo.com», prellenada en el campo «Para».

Configura información adicional

Puedes agregar otros atributos al enlace mailto para especificar más información, como el asunto del correo electrónico y el cuerpo del mensaje. Por ejemplo:


a href="mailto:correo@ejemplo.com?subject=Asunto del correo&body=Cuerpo del mensaje">Enviar correo</a>

Con este código, el link abrirá un correo electrónico con el asunto y el cuerpo del mensaje predefinidos. Los clientes pueden editar esta información antes de enviar su solicitud.

Ejecuta el código de tu enlace mailto

Ahora está listo el código con el podrás ejecutar un mailto. Este debe verse de la siguiente manera:


<!DOCTYPE html> 
               <html> 
               <head> 
               <title>Ejemplo de enlace mailto</title> 
               </head> 
               <body> 
               <h1>Contacto</h1> 
               <p>Para cualquier consulta o pregunta, no dudes en ponerte en contacto con nosotros:</p> 
               <a href="mailto:info@example.com">Enviar correo</a> 
               </body> 
               </html>

En la interfaz de tu sitio web, se verá así:

Cómo hacer un link a un email

Alternativas al uso del mailto

Existen alternativas a la implementación de mailto en HTML, las cuales pueden ajustarse a tus necesidades y requerimientos. Aquí las más comunes:

  • Formulario de contacto: crea un formulario de contacto en tu página web, con el que los usuarios puedan enviar sus datos directo al servidor para su procesamiento. Esto te brindará más control sobre la validación de los datos y la gestión de los correos electrónicos enviados.
  • Scripts del lado del servidor: emplea scripts del lado del servidor, como PHP, Python, Ruby, etc. para procesar los formularios de contacto o enviar correos electrónicos. Con estos, puedes obtener datos y mandarlos a través de un servidor de email de manera más personalizada.
  • API de correo electrónico: utiliza servicios de correo electrónico, como SendGrid o Mailgun, que ofrecen API para enviar correos de forma automática. Las API pueden añadirse a tu página web sin la necesidad de abrir una plataforma de email en la computadora.
  • Enlaces a formularios de correo electrónico en línea: proporciona enlaces a formularios de correo electrónico en línea, como Google Forms o servicios similares.

Los enlaces mailto en HTML son una forma sencilla de implementar enlaces de correo electrónico en una página web. Su uso beneficia la comunicación directa con sus visitantes en una plataforma a la que probablemente están acostumbrados los clientes.

Sin embargo, aunque facilita la redacción y personalización del mensaje, también tiene limitaciones, pues dependen de factores ajenos a tu gestión, como problemas de seguridad y la diversidad de hábitos de consumo de las personas.

Por tanto, antes de tomar la mejor decisión para el sitio de tu empresa, considera alternativas y elige el recurso que se ajuste a tus necesidades y a la forma de comunicarte con tus clientes. No olvides brindar opciones para tus clientes que prefieren otros canales. Y no te preocupes, siempre puedes optar por herramientas que te faciliten la interacción con ellos, como una plataforma CRM.

Si decides emplear el mailto, te sugerimos implementar buenas prácticas como validar y proteger las direcciones de correo electrónico; ofrecer alternativas para aquellos que no puedan usar un enlace mailto y considerar la privacidad de los usuarios.

Recuerda que mantener funcional y seguro tu sitio web te ayudará a tener una buena presencia en línea y tu marca adquirirá una buena reputación por la que te preferirán más personas. ¡Empieza a optimizar o a diseñar una página web para tu negocio!

Cómo usar HTML y CCS para mi página web
  HTML CSS
Temas: HTML

Artículos relacionados

Tu privacidad es muy importante para nosotros. HubSpot utiliza la información que nos proporcionas para mantenerte al tanto de nuestros productos, servicios y contenido relevante. Puedes cancelar la suscripción a estos mensajes en cualquier momento. Para más información, consulta nuestra Política de privacidad.

Aprende los conceptos básicos de HTML y CSS para tu sitio web

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO