您可以创建一个普通的锚点链接 (<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]
这个网站真棒

使用 <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: " (📨↗️)";
}
如果您真的不喜欢 mailto: 链接,有一个浏览器扩展可以为您服务。
我喜欢它不仅阻止它们,还会将电子邮件地址复制到您的剪贴板并告诉您它做了什么。
我在了解 HTML 4.0 的十年后才了解这个新功能。谢谢
一些额外的说明
正文参数不能包含 HTML,即使您以任何格式进行转义也不行。(某些浏览器+客户端仍然可能接受它,但它不合法)。
如果 mailto 由外部软件处理,Target _blank 可能会产生一个不需要的副作用,即创建一个空的浏览器标签页。因此,当用户再次打开浏览器时,他们看到的就是一个空白页面。这显然对可用性非常不利,但我仍然更喜欢 target _blank,任何仍然打开空白标签页的浏览器都应该修复它 ;-)
我想知道 mailto: 链接对于某些用户是否已损坏。换句话说,点击此类链接是否会导致错误状态或任何用户 *无法* 在点击链接后看到“新邮件”对话框的状态?
当然可以:如果用户从未费心寻找在浏览器中将网络邮件设置为负责处理程序的模糊设置,他们可能会被丢到本地 Outlook/WinMail 默认客户端中,然后开始其首次运行的“设置帐户”例程。(我认为您甚至无法检测到这一点。即使您可以测试 mailto: 的处理程序(从直觉上讲,这将是一个安全问题),您也不知道它是否存在是因为某个应用程序将自己设置为默认程序)。
带有 target=”_blank” 的表单在(至少)Android Chrome 73 上不起作用,它只是在一个新的空标签页中打开 URL… 删除 target 后,它确实会打开邮件应用程序(或者如果您有多个应用程序,则打开应用程序选择器)… 它在链接上按预期工作,所以可能只是一个 Android 的问题(无法处理意图/活动)。
在 Firefox 66 中,target=”_blank”(也适用于表单示例)似乎被忽略了,这很可惜。
但如果您以纯文本形式放置您的电子邮件,它会被垃圾邮件机器人收集 :(
我非常喜欢用于生成电子邮件的表单。
对于表情符号,以下方法对我有用
我错过了什么吗?我们如何知道他们使用的是哪种邮件客户端?
我知道您可以添加主题,但不知道还可以添加抄送、密送和正文!很棒的技巧——谢谢 Chris
我实际上喜欢使用 mailto; 当我需要提供一些指示,告诉我需要做什么以及需要提供什么内容时,我通常会使用电子邮件地址作为可见链接。 但是,如果他们点击它,那么它会预先填写电子邮件中的一切,以便他们只需填写空白即可。
我以前没有考虑过使用 GET 表单; 这是相当聪明的!
无论前端多么未来化,在基础部门总会有空间,我们肯定会错过。 #backtobasics 是我们有时需要的。
我实际上避免使用 mailto: 而不是仅仅将用户发送到基本联系表格。
你会认为浏览器应该有一个页面内电子邮件客户端来做一个弹出窗口,它已经连接到他们的电子邮件浏览器。
我发现这种方法的问题是,有时你希望保留发送消息的副本。 当然,你可以手动将消息复制/粘贴到某个地方,但我喜欢为此在表单中添加一个“给我发一份副本”复选框。
这太好了,谢谢克里斯
mailto 链接不是对机器人开放的吗?
是的(对爬虫来说),但我很久以前就不再担心这个了。 如今,垃圾邮件发送者可以轻松地以比维护爬虫更低的成本购买或找到大量经过验证的邮件地址列表。 当然,可能存在例外情况,但垃圾邮件发送者可能更关注寻找要发送的邮件地址,而不是发送到哪里。
所以我想,运行一个具有发送经过验证邮件权限的 Web 服务器比使用 mailto 更冒险 ;-)
我从来没有担心过电子邮件问题,因为我总可以选择通过服务器端 cpanel 来处理。
现在我使用 aws s3 存储桶来提供静态站点,因此这篇文章非常有用。 尽管整个过程看起来很古老。
我对以下内容感到困惑
a) “普通锚链接”。 这到底是什么意思?
b) “如果你使用实际的电子邮件地址作为链接,这可能是一个很好的指示”。 我们不能再使用实际的电子邮件地址,因为 GDPR 的原因。
c) “或者你可以使用 CSS 来帮助用一些表情符号故事来解释”。 这到底是什么意思? 没有上下文或所述编码的可见最终结果。
嘿,布莱恩,好问题!
我注意到 mailto: 链接在 iOS 11.3 上的 Safari 中不再有效,还有其他人遇到过这个问题吗?
除了 mailto 链接,我们还通过清晰地标记 PDF 和其他文档取得了成功——PDF 并在新标签页中打开 Google Drive 预览窗口。 从 UX 的角度来看,用户可以简单地查看文档和/或从那时起选择下载和打印。
只要存在“这是我的内容,我想要用户以对我有用的方式联系我”的心态,mailto: 链接就永远不会消失,即使对于大型组织/公司也是如此。
我很好奇,这里的人会推荐什么作为 2019 年兼容的针对 mailto: 链接和在页面中显示电子邮件地址的反垃圾邮件解决方案:)
如何在我的 mailto 锚标签正文中发送链接?
我在不同浏览器中发现了一些混合支持。 一些浏览器完全限制了这种功能,并没有打开电子邮件客户端,这对用户来说是一种糟糕的体验,因为他们可能会点击但没有任何反应。
我尽量避免这种情况,我认为在网站上提供一个联系表格要好得多,因为你可以更好地控制。
我同意,如果用户没有设置默认的电子邮件客户端怎么办? 如果他们使用 Gmail 或其他网络邮件怎么办?
感谢您提供有关 Mailto 链接的所有信息
是否有可能点击一个 mailto 链接并发送它?
情况:我收到了一封包含一些超链接的电子邮件,其中一个链接是“mailto”链接,点击后会打开另一封电子邮件。
需要:我可以自动点击该 mailto 链接并发送吗?