HTML 邮件中的 HTML 表单

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

您知道如何发送 HTML 邮件吗?

您知道文本区域和单选按钮等内容是 HTML 元素吗?

是的。

在收到 Google 的这封邮件后,我开始思考这个问题

HTML 邮件中的 HTML 表单

因此,显然这是可以做到的。 检查 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" />&nbsp;</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 撰写了关于此内容的博文。以下是当时的支援信息

2007 年关于 HTML 邮件中 HTML 表单支持的信息

我很乐意使用更多当前的电子邮件客户端更新此图表。如果任何人在运行测试,请告诉我,我们将开始构建它。

由于 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)。

相关示例

亚马逊发送电子邮件请求评论。他们没有使用邮件内表单,但可以!
2010 年 Netflix 电子邮件,它没有使用表单,但每个 ☆ 都是一个不同的锚链接,指向一个 URL,该 URL 将该值保存为您的用户评分。