电子邮件中交互式表单的终极指南

已发表: 2020-05-21

“电子邮件中的表格不起作用。”

“表单由 JavaScript 提供支持，但电子邮件不支持。”

你以前听过这些话吗？我们也是。许多营销人员认为在电子邮件中使用交互式表单是不可能的，但我们在这里打破这个神话。事实上，许多流行的电子邮件客户端都支持交互式表单，如果您知道如何去做，它可以成为使您的电子邮件更具吸引力并增加转化率的强大工具。

在 Litmus Live 2019 上，杰出的电子邮件开发人员 Mark Robbins 深入研究了电子邮件中的交互式表单，这启发了我们 Litmus 的团队也尝试使用交互式表单。在这篇文章中，我们将分享 Mark 演讲中的基本原则以及来自我们自己的测试的其他提示和建议，以便您也可以在电子邮件中使用交互式表单。

准备好潜水了吗？我们走吧！

电子邮件中交互式表单的力量

想一想您使用电子邮件将订阅者带到登录页面以鼓励他们填写某种类型的表格的所有时间。如果您能够完全跳过该步骤并授权您的订阅者在您的电子邮件中就地采取行动会怎样？

例如，您可以……

直接在电子邮件中收集产品评论或 NPS 反馈
无需将订阅者发送到登录页面即可进行简短的调查
允许您的订阅者更新用户配置文件或电子邮件首选项，而无需访问他们的用户帐户设置
在您的营销活动中嵌入潜在客户生成表单
和更多！

在电子邮件本身中呈现表单可以消除对登录页面的需要。您的订阅者为实现目标而必须采取的每一个额外步骤都会增加摩擦。在电子邮件中嵌入表单可以减少摩擦，缩短转化路径，并最终增加转化率。

电子邮件客户端支持电子邮件中的表单

电子邮件设计人员和开发人员回避使用交互式表单的最大原因之一是因为他们担心许多电子邮件客户端可能不支持它们。不过，支持不足的神话不再成立。事实上，前 5 个电子邮件客户端中有 4 个是 Gmail、iOS Mail、Apple Mail 和 Yahoo! 邮件——支持交互式表单，根据 Litmus 的电子邮件客户端市场份额，这些表单占所有电子邮件打开的 80% 以上。

以下是我们在流行的电子邮件客户端上测试交互式表单支持时的发现：

电子邮件客户端	支持表格吗？	笔记
苹果邮箱	是的	“GET”按预期工作。 “POST”打开一个带有表单的登陆页面，而不是从电子邮件提交
iPhone 邮件应用程序	有些	“GET”按预期工作。 “POST”不提交。
Gmail 桌面网络邮件	是的	提交带有弹出警报。
Gmail (iOS)	有些	不在 iOS 甘加中提交。 “POST”输入也被禁用。
安卓版 Gmail	有些	只有“GET”有效，但会打开一个带有表单的登录页面，而不是从电子邮件提交。使用“POST”，表单会在视觉上出现，但不允许用户输入。
Gmail 移动网络邮件	是的
Windows 上的 Outlook	不
Windows 10 邮件	不
展望 MacOS	不	该表单直观地出现并允许用户输入 Microsoft 电子邮件地址，但不允许提交。
展望网	不	仅当电子邮件在其自己的窗口中打开时才提交，而不是从收件箱视图提交。提交时，输入属性以“x_”为前缀，因此可能会导致收集数据的问题。建议为这个客户隐藏。
展望 iOS	是的
展望安卓	有些	表单以视觉方式显示，但键盘似乎不允许用户输入信息，因此用户必须复制和粘贴文本才能输入。建议在使用键盘输入时隐藏此客户端，但如果使用其他输入，则允许使用表单。
雅虎！桌面网络邮件	是的	提交带有弹出警报。
雅虎！ IOS	不	表单在视觉上出现并允许用户输入，但不允许提交。
雅虎！安卓	有些	表单以视觉方式显示，但键盘似乎不允许用户输入。
AOL 桌面网络邮件	是的
美国在线	不	表单在视觉上出现并允许用户输入，但不允许提交。
美国在线安卓系统	是的
三星邮件应用	有些	表单以视觉方式显示，但键盘似乎不允许用户输入信息。建议在使用键盘输入时隐藏此客户端，但如果使用其他输入，则允许使用表单。

如何在电子邮件中构建交互式表单

但是，您究竟如何在 HTML 电子邮件活动中实施表单呢？让我们一步一步分解Mark的方法：

1. 设置基础

让我们从一个非常简单的框架开始：

在最基本的层面上，有两个属性可以使表单工作：

<form action="[example_url]" method="get">
<!-- Form content -->
</form>

行动
这定义了表单数据发送到的登录页面或目的地。
方法
有两种方法可以将您的数据提交到该目的地：通过 GET 或 POST 请求。 GET 对电子邮件有更好的支持，但有一点要记住：如果您通过 GET 方法提交数据，您基本上是将该数据附加到一个 URL，因此提交的表单数据将在页面地址字段中可见.

例如，通过表单提交您的名字意味着您正在创建一个如下所示的 URL：

 http://example.com?Fname=Mark

2. 设置表单域

接下来，您必须考虑要从订阅者那里收集哪些信息，以及如何将其转换为单独的表单字段。

每个表单域都需要一个标签，这是告诉电子邮件阅读器此表单域的用途的信息。对于询问读者名字的表单字段，如下所示：

<label for="fname">
 First Name:
</label>
<input type="text" id="fname">

您希望为 id=”fname” 的元素收集文本输入——而标签 for=”fname” 将这两者连接起来。一些网络邮件客户端虽然改变了你的代码并且不支持 for & id 方法。他们喜欢为您的类和 ID 名称添加前缀——因此您的 ID 可能会被更改而您的 for 属性不会。结果：您的标签不再与您的 ID 匹配，这破坏了您的表单。这是一个简单的解决方案来防止这种情况：将标签包裹在您的输入周围，如下所示：

<label>

First Name: <input type="text">

</label>

您将有几种不同类型的文本输入可供选择，包括：

 <input type="text">
<input type="email">
<输入类型="电话">
<input type="number">
<input type="url">
<textarea></textarea>

为每个表单字段选择正确的输入类型可以帮助您做两件事：在移动设备上查看时，它可以更改键盘布局以匹配所需的输入。另外，在支持的地方，还有一些基本的验证。

对于我们通过表单提交的每条信息，我们需要提交两件事：名称和值。

姓名：
这是开发人员定义的表单字段名称，它通过 URL 字符串传递。
价值：
与表单字段中的名称相关联的开发人员或用户定义的值。

还记得我们上面的名字示例吗？ http://example.com?Fname=Mark 是为表单字段 First Name (=name) 提交名字“Mark”（=value）的 URL。

让我们在表单中添加一个评论区（name=”comment”）：

<input type="text" name="Fname">

<textarea name="comment">

</textarea>

表单提交的结果 URL 将如下所示：

 http://example.com?Fname=Mark&comment=hello

复选框和单选按钮

我们知道如何设置文本输入，但是如果您想在表单中添加复选框或单选按钮怎么办？

复选框的值是可选的。如果您没有为复选框定义值，它将作为“on”或“off”提交。这可行，但您可能希望将值更新为不同的措辞，具体取决于您计划如何处理接收端的数据。

例如，如果您的订阅者选中该框以同意您的条款和条件，则这里有一个复选框，该复选框将提交值“同意”：

<input type="checkbox" name="t-c" value="agree" >

 http://example.com?tc=agree

但是，对于单选按钮，值是必需的，您的名称元素是将单选按钮组合在一起的元素。在此示例中，您有两组单选按钮——一组用于广播，一组用于电视——并且您可以在每组中选择一个电台。

<input type="radio" name="radio" value="radio1" checked>

<input type="radio" name="radio" value="radio2">

<input type="radio" name="tv" value="BBC1">

<input type="radio" name="tv" value="BBC2">

您是否在第一个单选按钮上发现了已选中？这就是您如何标记要显示为预选选项的单选按钮。

将选项组合在一起

当您希望将单选按钮或复选框组合在一起时，就会出现字段集和图例。

字段集将相关项目组合在一起
传说基本上是那些非常项目的标签

在此示例中，我们将在一组单选按钮中的红色和蓝色选项之间进行选择，这些单选按钮都是关于选择您最喜欢的颜色。

<fieldset>

<legend>Favourite color</legend>

<label>Red

<input type="radio" name="color" value="r">

<div class="button red"></div>

</label>

<label>Blue

<input type="radio" name="color" value="b">

<div class="button blue"></div>

</label>

</fieldset>

如果您希望将地址（街道、邮政编码、州和国家/地区）等不同信息组合在一起，则字段集会派上用场。

单选按钮和复选框的默认样式不是很好。两者都显示得相当小，使许多读者无法访问它们。这就是为什么我们在上面添加了一个 div 类，它可以让我们用我们选择的样式替换默认的单选按钮样式。

覆盖默认单选按钮样式

覆盖单选按钮的默认样式需要几个步骤。让我们一一分解它们。

首先，您需要使用以下样式隐藏默认单选按钮：

.hidden-radio{

display:inline-block;

opacity:0;

width:0;

height:0;

margin:0 -9999px 0 0;

float:right;

position:absolute;
}

现在我们隐藏了默认输入，我们需要用我们自己的样式替换焦点输入状态，为读者关注的元素添加高光或轮廓：

input:focus + .button{

outline: Highlight auto

2px;

outline:

-webkit-focus-ring-color

auto 5px;

}

最后，我们按照您通常的风格设计我们的按钮。如果您使用悬停效果来设计按钮样式并鼓励点击，您也可以在此处执行此操作。另外，您需要为单选按钮的“选中”状态添加样式，以便轻松区分选中的单选按钮和未选中的单选按钮。

.button{

/* style */

}

.button:hover,

input:focus + .button{

/* style */

}

input:checked + .button{

/* style */

}

3.传递隐藏信息

您可能希望通过表单传递一些信息，而无需用户手动将其输入到表单中。例如，可以是姓名、用户 ID 或电子邮件地址等项目。您可以使用“隐藏”输入类型在幕后传递隐藏信息——用户无法看到或修改此操作：

例如，这段代码将传递这样的用户 ID：

<input type="hidden" name="user-id" value="U12345">

 http://example.com?user-id=U12345

4. 提交表格

好的 - 您的表单已构建。现在，我们需要一种让读者提交它的方法。有两种方法可以做到这一点：输入类型“提交”和按钮类型“提交”：

<input type="submit" value="Submit your form" >

<button type="submit">
Submit your form

</button>

它们的功能非常相似，但不同之处在于您放置文本的位置。如果您选择输入类型路线，您需要将文本设置为值。如果您正在使用按钮，您的提交副本将位于按钮结束标记之前。

电子邮件中交互式表单的回退策略

对于每封交互式电子邮件，设置回退是至关重要的。回退确保在表单无法完美运行的所有电子邮件客户端中，我们将其隐藏并显示回退。由于对表单的移动支持仍然参差不齐，我们选择在移动设备上隐藏所有 Litmus 电子邮件的表单，并在我们最流行的支持交互式表单功能的电子邮件客户端上实现完整的交互式体验。换句话说，我们实现的代码......

显示交互式表单
- 苹果邮箱
- Gmail（桌面网络）
- 雅虎（桌面网络）
显示回退：
- 所有 Outlook 和 Windows 邮件
- 所有移动设备

下面是代码中的样子：

CSS

.interactive-form {
	display: block !important;
	max-height: inherit !important;
	overflow: visible !important;
}
.fallback-form {
	display: none;
}

body[data-outlook-cycle] .outlookshow{ display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}
body[data-outlook-cycle] .outlookhide{ display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }

[class~="x_outlookshow"] { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}
[class~="x_outlookhide"] { display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }

@media only screen and (max-width: 640px) {
  .fallback-form {
    display:block !important;
    width: auto !important;
    overflow: visible !important;
    float: none !important;
    max-height:inherit !important;
    max-width:inherit !important;
    line-height: auto !important;
    margin-top: 0px !important;
    visibility:inherit !important;
  }
  .interactive-form, 
  .interactive-form p, 
  .interactive-form label, 
  .interactive-form input  {
    display:none !important;
    display:none !important;
    overflow:hidden !important;
    max-height: 0px !important;
    max-width: 0px !important;
    line-height: 0px !important;
    visibility:hidden !important;
  }
}

HTML

<!--[if mso | ie]>
<style>
.fallback-form {
  display: block !important;
  max-height: inherit !important;
  overflow: visible !important;
}
</style>
<![endif]-->


<!-- start FORM_INTERACTIVE -->
<!--[if (!mso)&(gte IE 10)]> <! -- -->
<div class="interactive-form outlookhide" style="display:none; max-height:0; line-height:0; font-size:0; mso-hide:all;">
    [Insert Interactive Form code here]
</div>
<!--<![endif]-->
<!-- end FORM_INTERACTIVE -->

<!-- start FORM_FALLBACK -->
<div class="fallback-form outlookshow">
    [Insert fallback for form section here]
</div>
<!-- end FORM_FALLBACK -->

示例：在操作中查看电子邮件中的交互式表单

好奇地看到这一切吗？

在这封电子邮件中，我们添加了一个表单，以便读者可以轻松地与我们的一位 Litmus 专家取得联系：

印第安纳步行者队向他们的球迷征求反馈——就在电子邮件中：

但是如果我不会编码怎么办？

交互性，尤其是交互表单等高级元素，需要相当多的编码技能。如果您是一名已经熟悉电子邮件代码的电子邮件开发人员，我们希望本分步指南可以帮助您在下一个活动中实施表单。

然而，对于许多处于职业生涯早期阶段的营销人员和电子邮件开发人员来说，实现表单等交互元素感觉像是一项不可能完成的任务。但对您来说有一些好消息——至少如果您在 Salesforce Marketing Cloud 中构建您的电子邮件。 Mark 和他在 Salesforce 的团队最近将 Form Blocks 添加到 Salesforce 的 Content Builder，允许营销人员将表单添加到他们的电子邮件中，并根据他们的需要自定义这些表单——无需任何编码技能。如果您是 Salesforce 客户，我们鼓励您检查一下！

更多的电子邮件服务提供商是否会让营销人员在他们的活动中轻松实施互动元素？ Salesforce 的动态表单块的推出可能是朝这个方向迈出的第一步。