如何把邮箱地址做成超链接?点击即可发邮件
想让网页上的邮箱地址可以点击,并打开邮件应用写信,可以使用 mailto: 链接。它和普通网页链接的写法很接近,只需要在邮箱地址前加上 mailto:。
例如,把 [email protected] 做成超链接:
<a href="mailto:[email protected]">[email protected]</a>
显示效果:[email protected]
点击后,如果设备已设置可处理邮件链接的应用,通常会打开写信窗口,并自动填入收件人地址。用户仍需填写邮件内容并点击发送,链接本身不会自动发送邮件。
一、在网页中添加邮箱超链接
如果你可以编辑网页 HTML,直接插入下面的代码即可:
<a href="mailto:[email protected]">给我们发邮件</a>
这里有两个地方可以修改:
mailto:后面的邮箱,是实际接收邮件的地址。- 标签中间的“给我们发邮件”,是用户看到的链接文字,可以换成邮箱地址、“联系销售”或其他说明。
例如,在网站联系我们页面中使用:
<p>
如需了解产品详情,请
<a href="mailto:[email protected]">联系销售团队</a>。
</p>
二、在 Word、博客或网站编辑器中设置
如果你使用的是可视化编辑器,通常不需要写 HTML:
- 输入邮箱地址,或输入“给我们发邮件”等文字。
- 选中这段文字,点击工具栏中的“插入链接”。
- 在链接地址中填写
mailto:[email protected]。 - 保存后,点击链接检查效果。
部分编辑器提供单独的“电子邮件地址”选项,按提示填写邮箱即可。如果编辑器已经自动添加 mailto:,不要重复填写。
如果你使用 Markdown 写博客,可以这样写:
[给我们发邮件](mailto:[email protected])
三、让邮件自动带上主题和正文
除了填入收件人,邮箱链接还可以预先填写邮件主题和正文,适合产品咨询、报价申请、问题反馈等场景。
自动填写邮件主题
在邮箱地址后加上 ?subject=:
<a href="mailto:[email protected]?subject=Product%20Inquiry">
咨询产品
</a>
用户点击后,邮件主题会预填为 Product Inquiry。
同时填写主题和正文
继续使用 &body= 添加正文:
<a href="mailto:[email protected]?subject=Product%20Inquiry&body=Hello%2C%0D%0AI%20would%20like%20a%20quote.">
申请报价
</a>
这个链接会预填:
收件人:[email protected]
主题:Product Inquiry
Hello,
I would like a quote.
主题和正文中的中文、空格、换行及特殊符号需要进行 URL 编码,避免内容被错误解析。例如,空格通常写成 %20,换行可以写成 %0D%0A。在 HTML 属性中,分隔参数的 & 建议写成 &。
如果不想手动处理这些编码,可以使用 Mailto 链接生成器,输入邮箱、主题和正文后,直接复制生成的链接或 HTML 代码。
四、邮箱超链接点击后为什么没有反应?
写法正确,但点击后没有出现写信窗口,常见原因是设备还没有配置处理邮件链接的应用。
你可以依次检查:
- 链接地址是否以
mailto:开头,邮箱是否填写正确。 - 设备是否安装并设置了默认邮件应用。
- 如果希望使用网页版邮箱,浏览器是否允许该网站处理邮件链接。
mailto: 无法保证每位访客都打开同一个邮件服务。 最终使用 Outlook、系统邮件应用,还是已配置的网页版邮箱,取决于访客自己的设备和浏览器设置。
因此,网站上最好同时显示可复制的邮箱地址:
<p>
联系邮箱:
<a href="mailto:[email protected]">[email protected]</a>
</p>
这样,即使用户无法直接打开邮件应用,也能复制地址自行发送邮件。
常见问题
邮箱超链接可以直接发送邮件吗?
不可以。它用于打开写信窗口,并预填收件人、主题或正文,用户仍需确认并发送。
可以把链接文字改成“联系我们”吗?
可以。链接文字和收件邮箱可以分别设置:
<a href="mailto:[email protected]">联系我们</a>
手机上也能使用吗?
通常可以。手机需要有能够处理邮件链接的应用,具体打开哪个应用取决于设备设置。
为什么预填的主题或正文不完整?
可能是特殊符号没有正确编码。例如,正文中的 & 如果没有编码,可能被当作参数分隔符。生成链接后,建议在实际使用的浏览器和邮件应用中测试一次。
把邮箱地址做成超链接,最基本的写法就是:
<a href="mailto:你的邮箱地址">显示文字</a>
只需要提供联系入口时,用这个格式即可;需要预填主题和正文时,可以通过 Mailto 链接生成器完成,再把生成结果粘贴到网页或编辑器中。