您知道如何发送 HTML 邮件吗?
您知道文本区域和单选按钮等内容是 HTML 元素吗?
是的。
在收到 Google 的这封邮件后,我开始思考这个问题

因此,显然这是可以做到的。 检查 Google 邮件的源代码,它没有什么特别之处。只是一个像其他任何表单一样的 HTML 表单。
我决定自己尝试一下,所以我创建了一个简单的 PHP 页面来 给自己发送 HTML 邮件。
<?php
$to = '[email protected]';
$subject = 'HTML Form in HTML Email';
$headers = "From: [email protected]\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = '<html><body>';
$message .= '<form action="http://mysite.com/process.php" method="post" target="_blank">';
$message .= '<label>How did you like the movie <strong>Turfnuts</strong>?</label><br />';
$message .= '<input name="rating" type="radio" /> ★☆☆☆<br />';
$message .= '<input name="rating" type="radio" /> ★★☆☆<br />';
$message .= '<input name="rating" type="radio" /> ★★★☆<br />';
$message .= '<input name="rating" type="radio" /> ★★★★<br />';
$message .= '<br />';
$message .= '<label for="commentText">Leave a quick review:</label><br />';
$message .= '<textarea cols="75" name="commentText" rows="5"></textarea><br />';
$message .= '<br />';
$message .= '<input type="submit" value="Submit your review" /> </form>';
$message .= '</body></html>';
mail($to, $subject, $message, $headers);
?>

我目前只测试了 Gmail。Gmail 在提交表单时会显示此警告
这只是一个警告。听起来并不太可怕。但它不像在普通网站上提交表单那样干净。肯定有一些用户会取消并且不会继续提交。Google 自身的电子邮件也会这样做。如果您点击“确定”,表单将按预期提交。
识别收件人
请注意,Google 电子邮件(或我的快速测试)不包含“姓名”和“电子邮件”等字段。那不是愚蠢的吗?发送此类电子邮件的任何人都会知道这些信息。但是,当您收到表单数据时,您如何知道它呢?一种方法是在隐藏输入中将其与发布数据一起传递。您用于生成这些电子邮件的任何系统也可以将该电子邮件放在输入的值中
<input type="hidden" name="email" value="[[prefill with email]]">
但这并不特别安全。任何四处挖掘的人都可以看到您如何发布这些数据并使用真实电子邮件地址提交虚假帖子。不好。最好使用识别用户的秘密代码发布表单(以及您想要安全识别任何其他内容,例如他们正在审查的产品)。
<input type="hidden" name="email" value="90d8a0f9d87a0987d098ad87fa0ds7fd">
<input type="hidden" name="product" value="0870n89f7cxz98f7e0qwd87sdf">
这些乱码值将是 加盐哈希,您在发送之前会在您的端存储它们。然后,当您收到它们时,您可以将它们匹配起来,并准确知道该评论属于哪个用户和哪个产品。我现在还不是安全专家,所以如果您有更智能的方法,请告诉我。
支持
Mark Wyner 于 2007 年 为 Campaign Monitor 撰写了关于此内容的博文。以下是当时的支援信息

我很乐意使用更多当前的电子邮件客户端更新此图表。如果任何人在运行测试,请告诉我,我们将开始构建它。
由于 Campaign Monitor 上的博文,我只能假设它们允许您发送包含表单的电子邮件,但我尚未对其进行测试。我确实尝试从 MailChimp 发送一封电子邮件,但它似乎在发送电子邮件之前删除了表单。根据那篇旧文章,一些电子邮件客户端认为包含表单的电子邮件“不安全”,因此这可能是 MailChimp 为防止用户遇到此类不良体验并提高可交付性而采取的一种措施。
如果您正在考虑在实践中使用此想法,例如上面介绍的用例,那么您将无法使用服务来发送电子邮件(因为您需要安全地生成、存储和发送加盐哈希)。
Outlook
看起来旧版本的 Outlook 会删除表单功能。所以这是一个问题。希望新版本不会这样做。旧版本的 outlook 也使用 Internet Explorer 作为渲染引擎,这意味着您可以使用条件标签来帮助
<!--[if IE]>
<a href="http://yourwebsite.com/review.php?whatever">
Review this product
</a>
<![endif]-->
<!--[if !IE]><!-->
<form>
<!-- Actual review form -->
</form>
<!--<![endif]-->
这方面的里程可能会有所不同……显然 Outlook 2007 和 Outlook 2010 使用 Microsoft Word(WTF)作为渲染引擎而不是 Internet Explorer。不确定条件标签在 Microsoft Word 中如何工作(同样,WTF)。
相关示例


出于某种原因,微软认为使用 Word 作为渲染引擎更安全……
我从未要求更多。太棒了 :) 感谢分享。
而且他们甚至没有为 Office 2011 更新它。虽然我上次听说有人发起了一份请愿书。我认为来自 Newism(澳大利亚的网页设计工作室)的人为微软发起了一份请愿书,要求对电子邮件“设置一些标准”。
我自己还没有测试过,但看起来您可以在条件注释中使用“mso”而不是“ie”来定位 Microsoft Word:http://www.campaignmonitor.com/blog/post/1774/using-conditional-comments-to-1/
我们在我们的营销电子邮件中使用条件语句来提供“搜索”框。缺乏标准真是太痛苦了。-微笑-
您可能希望使用 UTF-8 而不是 ISO-8859-1,以及
\n
换行符而不是 CRLF/\r\n
以避免在多个邮件客户端中出现问题。很棒的文章。完全同意,非常欢迎电子邮件标准。
我听说 Mac 上的 office Office 2011 将使用 Webkit 呈现电子邮件。但不确定是否属实。
过去写过很多 HTML 电子邮件,感觉就像倒退了一大步。所有内容都包含在 HTML 表格中。事实上,在 07 年,微软决定使用 Word 作为其渲染引擎,这真是太神奇了。由于大多数企业用户都将其用作电子邮件客户端,因此这项技术几乎毫无用处,除非有一个很好的备用选项(也许还有一个指向 Web 表单的链接)。希望他们决定使用 Webkit 的决定(据报道适用于 Mac 上的 2011 版)也将延续到他们的下一个 Windows 版本。与旧版本的 IE 一样,公司很少升级 MS Office。
作为一名撰写、设计和编码 HTML 电子邮件的人;这很酷,但除了电子邮件客户端渲染此类电子邮件的能力之外,还有其他因素。例如;Netflix 和 amazon.com,两者都将是已建立的关系帐户,因此是白名单或已接受的发送者。如果我要发送带有 <input> 或 <form> 标签的第三方电子邮件活动,则该活动的收件箱可交付性会大大降低。如果您想进行投票,只需伪造星级评定并使用图像作为您的 CTA/点击转换,然后将在目标网页上进行。
对于电子邮件中的快速简单的表单,我一直使用电子邮件中的 Google 文档表单来组织当地教会活动的报名。将表单通过电子邮件发送给自己后,您可以在 Gmail 窗口中对其进行一些编辑(没有代码,但您至少可以编辑标签和一些格式)。它还通过在网页上提供表单链接为不支持表单的客户端提供后备方案。我认为这是目前最安全的回退方案,就像批量邮件服务在任何类型的 HTML 电子邮件群发中包含的那样(例如,Mailchimp 或 Constant Contact)。
我不知道为什么我打字 por exemplo。我不会说西班牙语。
我预计Kmail和Thunderbird可能分别拥有Webkit和Gecko的所有功能。显然几乎每个人都过滤HTML。仍然存在网络漏洞问题,以及在没有重大隐私问题的情况下无法加载外部内容的事实。电子邮件中的HTML = 自动确认回执。对垃圾邮件发送者来说很棒。除非所有内容都编码到数据URI中,或者实现了一些使用多部分MIME的安全发送此类电子邮件的技巧。
我只能说:http://pastebin.com/DNgW3LZp
更重要的是,为什么不使用标签来正确标记输入?“你对……感觉如何”这个问题不是标签,开头字符才是标签。
两年前,我试图为我的一个客户制作一个订购最新产品的表单。几个小时后我就放弃了。如果没有机会让它至少对每个客户都勉强可用,为什么要费心呢?
要回答关于Outlook 2007/2010条件注释的最后一个问题,您仍然可以使用它们,只需使用“mso gte 9”代替“IE”(例如:<!–[if mso gte 9]><![endif]–>)
感谢您发布这篇有趣的文章……我在这里有点新手,所以我的帖子可能会被嘲笑……但是您是如何获得那些星号字符的……“★★★☆”……我只是从您的代码中复制了这些……但是您是如何输入它们的……我在 Windows 机器上工作……。
Alt + 2605 = ★
Alt + 2606 = ☆
那是Alt键,然后是数字键盘上的加号键,然后是数字,同样在数字键盘上。
此外,& #9733; = ★ 和 & #9734; = ☆当然,在&符号后不要加空格
关于:加盐哈希。比平均水平好得多。您需要的是一对“回调数据”和该数据的HMAC。两个优点
1. HMAC 可以被认为是“使用秘密盐的正确方法”
2. 无需保留哈希 -> 电子邮件和哈希 -> 产品查找表
我不在电子邮件中放置表单的最喜欢的理由,通过逐步说明进行说明
1. 在 Outlook 预览窗格中查看包含表单的电子邮件。
2. 如果表单实际上可见,请在表单的文本输入字段或文本区域中输入内容。
3. 意识到您犯了一个错误……并且,利用多年的经验和肌肉记忆,按“Backspace”键更正它。
4. 由于 Outlook 无论光标/焦点在哪里,都将“Backspace”键解释为“删除此电子邮件”快捷方式,因此,当 Outlook 立即从您的收件箱中删除*整个*电子邮件时,请充满活力和技巧地咒骂。
这种克鲁格式诱饵的可用性灾难是使电子邮件中的表单即使在现在也成为风险过高的提议的原因。这就是为什么我敦促客户对任何数据收集使用目标网页。
我希望看到CM进行更新的全平台测试,但我对结果并不乐观。
哇!好吧,我不会浪费时间创建订阅表单邮件。@Simisker-感谢您的信息。
酷克里斯.. :)
我完全同意乔纳森的观点。它可能是一件很酷的事情,但可交付性会下降。Simisker 也提出了一个很好的观点
但感谢分享,克里斯。我一定会研究一下的
这就是我不阅读或编写HTML电子邮件的原因之一。纯文本……当然,有时我被迫成为发送者,但那是另一回事……。
我在本文中学到的一件事是,通过将字符串连接在一起从头开始创建邮件。我喜欢这个想法,因为HTML、电子邮件、HTTP请求和响应以及许多其他概念都只是纯文本。手动创建它们可以让你更多地了解它们。
感谢克里斯。我喜欢这个教程。
嘿,克里斯,
我最近为我们的一位客户做了关于电子邮件中HTML表单的此类研究。底线是它几乎不起作用,因此最好链接到浏览器中的表单。这是我的结果文章(和图表)
http://www.flitehaus.com/blog/2011-06-20-can-i-include-form-email
太糟糕了。
克里斯,一篇很棒且内容丰富的帖子!
我这里有一个问题,有点偏离主题。我使用简单的HTML模板发送我的个人邮件!这是一个好习惯吗?有些人告诉我,只有在您推广关于某些东西的活动时,HTML电子邮件看起来才不错!是这样吗?
艾哈迈德,您在Outlook或Gmail等电子邮件客户端中执行的大量格式设置最终可能与您将其编码为HTML并使用MailChimp/Emma/Constant Contact/等服务发送出去时呈现的效果不同。如果您只想向朋友发送一封随意邮件,这显然是过度的。它实际上取决于您添加到邮件中的格式数量和类型。
如果您真的担心事情在其他人的电脑上是如何呈现的,那么我建议在Yahoo Mail、Hotmail、Gmail等网络邮件服务上设置测试帐户,并安装Outlook、Mac Mail等基于软件的客户端。然后将格式化的电子邮件发送到这些地址中的每一个,并查看它们的外观。对于可能产生的回报很少的工作来说,这需要付出很多努力。而且,说到过度,对于我的HTML电子邮件客户,我使用Email on Acid的测试服务在以下平台上进行测试
网络客户端(使用Chrome、Firefox、IE 8和IE9)
AOL网络
Gmail
Hotmail
雅虎!
移动设备
Android Gmail 2.2
iPad 3.0
iPhone 3.0
桌面客户端
Entourage 2004
Entourage 2008
Live Mail
Lotus Notes 8
Mac Mail
Outlook 2003
Outlook 2007
Outlook 2010
并且您可以相信我的编码电子邮件在所有这些方面都几乎相同地显示。
我每年发送大约一百封HTML电子邮件,并经常收到此请求(以及“我们可以在电子邮件中嵌入Flash影片吗?”的老问题)。客户端或邮件服务器端发生故障的风险不值得您为尝试使其在一个场景中工作而不会在另一个场景中破坏它而付出的努力。即使那样,您的成功率也微乎其微。考虑到仅仅编码和测试电子邮件以在20多个客户端场景中正确显示所付出的所有努力,坦率地说,我很高兴这是一个不可靠的功能。
但感谢您深入研究。这就是我回到这个网站的原因。
使用您对隐藏输入的加盐哈希方法,您必须在数据库中至少添加一列来存储哈希值。有点烦人。(只要您在服务器端存储这些丑陋的字符串,为什么它们需要是任何东西的哈希值?它们可以只是与用户/产品在查找表中匹配的随机字符串。)
更简洁的解决方案是将电子邮件和产品值保留为纯文本,并包含第三个隐藏值。将其称为“签名”。使其值成为电子邮件、产品和仅您知道的密钥的哈希值。然后,在提交表单时,计算提交的电子邮件、提交的产品和您的密钥的哈希值。如果计算出的签名与提交的签名匹配,则您知道这些值最初来自您,而无需维护充满随机数字的特殊数据库列。Facebook Connect 使用此方法在第三方网站上执行登录时对重定向的 URL 查询字符串参数进行签名。HMAC (http://en.wikipedia.org/wiki/HMAC) 是此方法的一个版本,它已通过学术审查,以确保即使在基于哈希函数冲突的高级攻击中也能确保其安全。
有趣的文章。作为一个经常使用HTML电子邮件的编码人员,我分享了对完全缺乏标准的挫败感。原则上,表单将非常天才,但由于支持如此粗略,因此目前似乎没有优势。
Simisker,我喜欢你的评论。我甚至没有想到固有的退格键问题。有时最简单的事情是最有趣的。我们努力寻找解决方法并变得非常聪明,然后突然间,当您想到为什么没有人想到这一点时,就会出现“哎呀!”时刻。我的朋友,你是一个有常识的天才。 :)
虽然你可能会发现有时在你的车里有一个厨房很有用,但这绝对不是这样。
想想这会导致的所有安全和垃圾邮件相关问题。“嘿,伙计,这是你的银行。我们的数据遇到了一些麻烦。你能再次提供你的凭据吗?谢谢!”
如今,网络处理表单非常好,所以为什么要在电子邮件中使用表单呢。电子邮件就是电子邮件。网站就是网站。厨房就是厨房。汽车就是汽车。
我更喜欢创新思维而不是“这就是这样,就是这样”。
我很高兴公司决定开始将事物整合到智能手机中,而不是说“电话就是电话,音乐播放器就是音乐播放器,电脑就是电脑”。
对于任何您认真想要收集数据的表单,我建议链接到一个承载该表单的登陆页面。或者,如果您发送邮件的工具能够跟踪点击链接的情况,您可以采用Netflix的方式,跟踪谁点击了哪个链接。
Outlook(也影响Hotmail)有条件语句,但它们可能导致其他地方的渲染问题(最显著的是强制在旧款黑莓上显示HTML)。
我今天早上刚收到亚马逊发来的一个HTML表单!
很棒的文章……我喜欢这个HTML技巧……。
我知道Outlook使用Word渲染HTML,而之前他们使用IE渲染。但从我的角度来看,我理解为什么(尽管我不同意)。很多用户在发送邮件之前很久就在Word中撰写邮件,与其他用户共享Word文档以检查/更正它。当他们满意后,将其复制/粘贴到Outlook中。
在Outlook使用IE渲染的那些日子里,邮件会突然看起来不同,导致在更正布局方面产生很多挫败感。这就是为什么微软又改回Word的原因。这有点道理,即使我们开发人员讨厌这个决定。
如果由我决定,我也会让Word使用IE渲染。
我还没有测试过,但我认为这是一个非常棒且内容丰富的技巧,您在这里发布了它。请继续分享。
这是一个很酷的功能。可惜的是,它在一些流行的邮件客户端中不受支持。
哇。这对于向我们的客户发送一些好看的时事通讯来说真的很酷!非常感谢您的信息和代码!
感谢您的提示,这似乎是利用电子邮件进行客户调查和反馈的绝佳方法。我一定会尝试一下。
不同电子邮件客户端中表单兼容性是否有任何更新?我非常想知道。
您可以使用带有盐的双向加密来加密您的电子邮件。在您发送给客户时加密电子邮件,然后在值传回您的服务器时解密以获取真实的电子邮件。
大家好,
我正在构建一个应用程序,用于在电子邮件中发送包含“批准/拒绝”按钮的HTML表单。
我能够接收用户的响应并将其存储在数据库中。
有时,我会将电子邮件发送到邮件列表。在这里,我无法找出哪个用户做出了响应,因为我只有包含邮件列表电子邮件ID的隐藏字段。
结果,我的数据库中收到了许多针对邮件列表电子邮件ID的回复。
有没有办法捕获实际做出响应的用户邮件ID?
我使用Gmail作为我的邮件客户端。
请建议解决方案或解决方法来实现此目标。
任何帮助都将非常有帮助。
提前感谢。
我们需要在电子邮件中发送一份调查问卷。是否有关于Outlook 2010或最新版本的信息,它们是否支持此功能?