Todo sobre mailto: Enlaces | Programar Plus

Puede hacer un vínculo de anclaje de variedad de jardín (<a>) abre un nuevo correo electrónico. Hagamos un pequeño viaje a esta función. Es bastante fácil de usar, pero como ocurre con cualquier sitio web, hay muchas cosas a considerar.

La funcionalidad básica

<a href="https://css-tricks.com/all-about-mailto-links/mailto:[email protected]">Email Us</a>

¡Funciona!

Pero inmediatamente nos encontramos con un puñado de problemas de UX. Uno de ellos es que hacer clic en ese enlace sorprende a algunas personas de una manera que no les gusta. De la misma manera, al hacer clic en un enlace a un PDF, se abre un archivo en lugar de una página web. Le suspiro. Llegaremos a eso en un momento.

“Abrir en una pestaña nueva” a veces sí importa.

Si un usuario tiene su cliente de correo predeterminado (por ejemplo, Outlook, Apple Mail, etc.) configurado para ser una aplicación nativa, realmente no importa. Hacen clic en un mailto: enlace, esa aplicación se abre, se crea un nuevo correo electrónico y se comporta de la misma manera si ha intentado abrir ese enlace en una nueva pestaña o no.

Pero si un usuario tiene configurado un cliente de correo electrónico basado en navegador, sí importa. Por ejemplo, puede permitir que Gmail sea su administrador de correo electrónico predeterminado en Chrome. En ese caso, el enlace se comporta como cualquier otro enlace, ya que si no abre en una nueva pestaña, la página se redirigirá a Gmail.

Estoy un poco indeciso al respecto. Antes he intervenido en la apertura de enlaces en nuevas pestañas, pero no específicamente en la apertura de correos electrónicos. Yo diría que me inclino un poco por usar target="_blank" en los enlaces de correo, a pesar de mis sentimientos sobre su uso en otros escenarios.

<a href="https://css-tricks.com/all-about-mailto-links/mailto:[email protected]" target="_blank" rel="noopener noreferrer">Email Us</a>

Agregar un sujeto y un cuerpo

Esto es algo raro de ver por alguna razón, pero mailto: Los enlaces también pueden definir el asunto y el cuerpo del correo electrónico. ¡Son solo parámetros de consulta!

mailto:[email protected]?subject=Important!&body=Hi.

Agregue soporte de copia y copia oculta

Puede enviar a varias direcciones de correo electrónico, e incluso copia al carbón (CC) y copia oculta (BCC) personas en el correo electrónico. El truco consiste en más parámetros de consulta y separar las direcciones de correo electrónico con comas.

mailto:[email protected][email protected],[email protected],[email protected]&[email protected]

Este sitio es muy útil

mailtolink.me ayudará a generar enlaces de correo electrónico.

Use un

para permitir que las personas elaboren el correo electrónico primero

No estoy seguro de cuán útil sea esto, pero es una curiosidad interesante que puedas hacer un <form> hacer un GET, que es básicamente una redirección a una URL, y esa URL puede estar en el mailto: formato con parámetros de consulta llenados por las entradas! Incluso se puede abrir en una nueva pestaña.

Ver la pluma
Utilice un

para hacer un correo electrónico de Chris Coyier (@chriscoyier)
en CodePen.

A la gente no le gustan las sorpresas

Porque mailto: Los enlaces son enlaces de ancla válidos como cualquier otro, por lo general tienen el mismo estilo. Pero hacer clic en ellos produce claramente resultados muy diferentes. Puede que valga la pena indicar mailto: enlaces de una manera especial.

Si utiliza una dirección de correo electrónico real como enlace, probablemente sea una buena indicación:

<a href="https://css-tricks.com/all-about-mailto-links/mailto:[email protected]">[email protected]</a>

O puede usar CSS para ayudar a explicar con una pequeña historia de emoji:

a[href^="mailto:"]::after {
  content: " (&#x1f4e8;&#x2197;&#xfe0f;)";
}

Si realmente no le gustan los enlaces mailto:, hay una extensión de navegador para usted.

https://ihatemailto.com/

Me encanta cómo no solo los bloquea, sino que copia la dirección de correo electrónico en su portapapeles y le dice que eso es lo que hizo.