关于 mailto: 链接

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 价值 $200 的免费积分!

您可以创建一个普通的锚点链接 (<a>) 来打开一个新的电子邮件。让我们来了解一下这个功能。它使用起来非常简单,但就像任何 Web 东西一样,有很多需要考虑的地方。

基本功能

<a href="mailto:[email protected]">Email Us</a>

它有效!

但我们立即遇到了几个 UX 问题。其中之一是,**点击该链接以一种人们不喜欢的方式让他们感到惊讶**。有点像点击一个指向 PDF 的链接会打开一个文件而不是一个网页。。我们稍后会谈到这一点。

“在新标签页中打开”有时很重要。

如果用户将默认邮件客户端(例如 Outlook、Apple Mail 等)设置为本地应用程序,那么它实际上并不重要。他们点击一个 mailto: 链接,该应用程序打开,创建一封新电子邮件,无论您是否尝试在新标签页中打开该链接,它的行为都是一样的。

但如果用户设置了基于浏览器的电子邮件客户端,那么它就很重要。例如,您可以 允许 Gmail 成为您在 Chrome 上的默认电子邮件处理程序。在这种情况下,该链接的行为就像任何其他链接一样,如果您没有在新标签页中打开它,页面将重定向到 Gmail。

我对此有点犹豫。 我之前已经权衡过在新标签页中打开链接,但没有专门谈到打开电子邮件。我会说我更倾向于在邮件链接上使用 target="_blank",尽管我对于在其他情况下使用它的感觉。

<a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer">Email Us</a>

添加主题和正文

出于某种原因,这并不常见,但 mailto: 链接也可以定义电子邮件主题和正文内容。它们只是查询参数!

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

添加抄送和密送支持

您可以发送到多个电子邮件地址,甚至可以将电子邮件**抄送**(CC) 和**密送**(BCC) 给其他人。诀窍是使用更多查询参数并用逗号分隔电子邮件地址。

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

这个网站真棒

mailtolink.me 将帮助您生成电子邮件链接。

使用 <form> 让人们先制作电子邮件

我不确定这有多有用,但这是一个有趣的现象,您可以让一个 <form> 执行 GET 操作,这基本上是重定向到一个 URL——而该 URL 可以是 mailto: 格式,并带有由输入填充的查询参数!它甚至可以打开一个新标签页。

查看 Chris Coyier 的
使用 <form> 发送电子邮件
创作。
CodePen 上。

人们不喜欢惊喜

因为 mailto: 链接与任何其他链接一样,都是有效的锚点链接,所以它们通常以完全相同的方式进行样式设置。但点击它们显然会产生截然不同的结果。也许值得以一种特殊的方式来指示 mailto: 链接。

如果您使用实际的电子邮件地址作为链接,这可能是一个很好的指示

<a href="mailto:[email protected]">[email protected]</a>

或者,您可以使用 CSS 来帮助通过一些表情符号故事来解释

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

如果您真的不喜欢 mailto: 链接,有一个浏览器扩展可以为您服务。

https://ihatemailto.com/

我喜欢它不仅阻止它们,还会将电子邮件地址复制到您的剪贴板并告诉您它做了什么。