高转化着陆页表单的 17 个关键要素 [已验证]

登陆页面表单对您的底线有多大影响？

让我们看看 Expedia：早在 2010 年，Expedia 发现一个名为“Company”的可选表单字段每年要花费他们 1200万美元。

什么？！

是的。

点击“立即预订”按钮的访问者用他们的银行名称填写可选的“公司”字段，然后添加他们的银行地址而不是他们的家庭地址，从而导致数百次交易失败。

在他们删除额外的表单字段后，销售额一夜之间飙升。

哎呀。

当涉及到登陆页面表单时，小事故总是会导致大量的转化点击。

这就是为什么登陆页面表单是所有营销中研究最多的元素之一的原因之一。

好消息：经过多年的着陆页设计和转换优化，我们将完美的着陆页表单提炼为 17 个数据支持的元素。 在本文中，我们将分解如何优化每一个（通过示例）。

把它们弄对，你就有了转化金。

弄错了，您可能会发现自己像 Expedia 这样的转换正在大出血。

首先，在我们进入最佳实践和示例之前，让我们澄清关于是否所有着陆页都需要表单的任何困惑。

简短的回答：是和不是。

让我解释…

存在两种类型的登录页面：潜在客户捕获页面和点击页面。

潜在客户捕获页面（AKA 潜在客户生成页面）包括直接在登录页面上的表单。 毕竟，如果没有表格，您将如何捕获潜在客户信息以便销售人员跟进？

例如，Blueshift 的营销自动化登陆页面有一个潜在客户表单，要求提供联系信息。 潜在客户提交联系信息后，Blueshift 的销售团队将跟进潜在客户安排演示。 简单的。

另一方面，点击页面不包括登陆页面上的表单。 相反，当您单击号召性用语 (CTA) 按钮时，它会打开（或点击进入）一个转换页面，潜在客户可以在该页面立即完成您的转换目标（即无需提供潜在客户信息）。

例如，诺顿在销售防病毒软件之前使用点击登陆页面来预热潜在客户。 由于潜在客户可以直接从网站购买（不需要销售团队），他们不需要潜在客户表格。

因此，当涉及到登录页面上的表单时，从技术上讲，只有潜在客户捕获页面包含表单。

但是，即使点击页面不包含登录页面上的表单，它也很有可能点击到包含表单的页面，例如帐户创建页面、注册页面或结帐页面。

例如，即使是诺顿的点击页面最终也包含一个付款表单：

要点：并非所有登陆页面都包含表单，但在某些时候，每条转换路径都会经过一个表单。 你无法避免它们。 至少，每个网站都需要一个联系表。 所以听好了！

废话不多说，让我们来探讨一下高转化登陆页面表单设计的 17 个元素（排名不分先后）：

1. 表单布局
2. 面包屑技术（多步骤）
3. 进度指标
4. 字段数
5. 字段标签
6. 占位符文本
7. 点击触发器
8. 显微镜
9. 号召性用语 (CTA)
10. 表单弹出与嵌入
11. 自动填充
12. 自动格式化
13. 社会证明
14. 必需与可选
15. 移动友好
16. 条件逻辑
17. 单选按钮与下拉菜单

在表单方面，您有三种布局选项：单列、双列或混合。

单列表单是一种线性表单，表单域从上到下以直线方式组织。 例如，这个来自 Hellosign 的潜在客户表单具有单列布局：

另一方面，双列表单具有从上到下按行组织的两列表单字段。 例如，来自 Hubspot 的这种潜在客户表单具有双列布局：

最后，混合表单是具有单列和双列的表单。 例如，这个 Oscar 表单具有混合布局：

多年来，单列表单被认为是实现更高转化率的最佳表单布局。

例如，来自 CXL 的 Peep 过去曾表示，单列表单的性能优于双列表单。 Ben Labay（Speero 的 UX 设计师和营销总监）甚至发表了一项研究，宣称线性形式更快，因此更好。

但并非所有人都同意。

例如，Hubspot 对单列形式进行了测试，发现他们的双列形式比单列形式高出 57%。

为什么？ 更多表单字段。

Hubspot 的表单有 13 个表单域； 单列布局看起来和感觉令人生畏。 这可能是较短的双列形式转换得更高的原因。

要点：在表单布局方面，请在选择选项之前考虑表单字段的数量。

如果您有八个或更少的表单域，则单列表单可能效果最好。 存在大量证据证明更短的单列表格更容易和更快地填写，因为它们不会破坏从上到下的垂直动量。

如果您有 10 多个像 Hubspot 这样的表单字段，那么双列表单的性能可能会更好。 在这种情况下，双列表单使表单长度感觉更短且不那么压倒性。

为了两全其美，请尝试混合形式：使用一些双列行来缩短表单，但使用一些单列行来保持势头。

如果您真的想增加表单转换，请考虑将单列表单分解为多个步骤。 这将我们带到了下一点……

多步骤表单（又名面包屑技术）将长表单分解为多个步骤，每个步骤不超过 3-4 个表单字段（最好在单个列中）。

但这还不是全部。

多步骤表格使用行为心理学通过首先提出简单的问题将潜在客户从一个阶段微转换到下一个阶段，将令人生畏的问题留到最后。

嗯？

行为心理学告诉我们，人们喜欢完成他们开始的事情。 面包屑技术的神奇之处在于让他们首先问垒球问题。

例如，我们自己的潜在客户表格使用分为四个步骤的多步骤表格。 但是，我们不是先要求提供电子邮件地址和电话号码（非常吓人），而是最后要求。 实际上，前三个步骤提出了不具威胁性的问题：

结果？ 更多转化。

让我们看看数据……

我们将我们客户的表格转换为两个步骤（最后询问姓名、电话、电子邮件）。 通过这样做，我们实现了：

• 每次转化费用从 800 美元以上降至 35 美元
• 转化量从 6 增加到 135/月
• 转化率从 1% 提高到近 20%

这是表格：

结果如下：

我们对另一个客户做了同样的事情，转化率提高了 74%，CPA 下降了 51%。

但我们并不是唯一使用多步骤表单的人。 最好的潜在客户生成和 SaaS 登陆页面也都使用多步骤表单。

例如，Lytx 车辆跟踪在其着陆页上使用多步骤表单：

ADP 在其登录页面上使用了一个多步骤表单：

要点：多步表单转换率不高于单步表单的唯一实例是低价值、低要价的产品，如指南、白皮书或电子书。 对于每个其他标准的潜在客户生成登陆页面（即请求演示或免费咨询），多步骤表格的转换率高于单步骤表格。

如果您确实选择了多步骤表格，请不要忘记进度指示器（尤其是较长的表格）。

顾名思义，进度指示器（或进度条）使用视觉标记向访问者指示他们在表单中的位置以及距离完成还有多长时间。

例如，ADP 通过对其表格的每个步骤进行编号并以蓝色突出显示当前步骤来指示进度：

其他两种类型的进度条包括完成百分比和标记步骤（无数字）：

完成百分比

剩余步数（无数字）

要点：当谈到进度指标时，请慷慨地使用它们。 研究表明，可视化清晰的完成路径可以增加表单转换并减少购物车放弃。 最后，不要忘记在步骤之间来回切换很容易。

百万美元的问题：我的登录页面表单中应该包含多少表单域？

根据 Hubspot 的说法，典型的潜在客户表单由五个表单字段组成：

根据 Hubspot 的说法，表格越长，转化率越低：

看起来合乎逻辑，对吧？

没那么快。

是的，较短的表单字段通常会带来更高的转化率，但并非总是如此。

例如，在 Michael Aagaard（前 Unbounce 的前身）的一项著名实验中，他发现删除三个表单字段（从 9 到 6）实际上会降低14% 的转化率。

发生了什么？ 迈克尔得出结论，他淘汰的三个领域实际上是前景参与最多的三个领域。 因此，他将它们添加回来，并更新了副本以限制摩擦，并在原始版本的基础上体验了 19% 的转化率增加。

在另一个例子中，CXL 发现，仅询问电子邮件，转化率比询问姓名、州和驾驶经验时低13.56%：

在潜在客户生成方面，如果您所做的只是消除表单字段，那么您的潜在客户还剩下什么？

除了姓名、电话号码和电子邮件等令人生畏的问题外，别无他求。 在这种情况下，仅凭恐惧就会使您失去转变。

或者没有足够的问题让潜在客户觉得你会正确回答他们的问题。

此外，较短的表单可能会通过减少表单字段来增加转化率，但同时会降低潜在客户的质量。 没有布埃诺。

要点：每个人都同意您应该消除不必要的表单字段（即您不需要回答的问题）。 是否应该添加更多字段或消除字段取决于上下文。

• 动机：更接近购买的热门线索更倾向于填写较长的表格，因为他们有很高的购买动机（即没有什么会妨碍他们）。 例如，如果我想要一份抵押贷款估算，我将填写 20 个表单字段来接收它。 对于免费的电子书来说，这并不多。
• 转换目标：电子邮件订阅或按需网络研讨会注册所需的字段比潜在客户生成表单少得多。 两个不同的目标，两种不同的表格尺寸。 无需多步骤选择简单的电子邮件。
• 潜在客户质量：如果潜在客户质量比潜在客户数量更重要，请添加更多表单字段并收集更多信息。 但是，如果潜在客户质量不比潜在客户数量更重要（即您正在收集第一方数据以构建自定义广告受众），那么获胜的表单字段就会更少。
• 结构：如果您提出一个严肃的要求，例如安排演示或与销售代表会面，多步骤表格就像作弊码。 只需将问题分解成更小的步骤，您就可以避免提出更多问题。

最后，我们联系了 Unbounce 的首席执行官兼创始人 Oli Gardner，以获得他对表格长度的反馈。 他是这样说的：

“我从大多数人的心态开始，即更少的表单字段表现更好。

从转换的角度来看，这仍然是正确的。 但是您会惊讶于添加更多字段会如何影响结果。

有时表格长度并没有太大区别，如果你对质量感兴趣而不是数量，额外的摩擦可能是一件好事。

但是要谨慎选择这些字段，否则摩擦会产生虚假数据。

例如，我看到一个表格，其中提供了有关新的芯片和密码支付技术的报告。 该表格在号召性用语旁边包含一个单选按钮字段，询问我是雇主还是求职者，这两者都与报价无关 - 这是一个必填字段！

不必要的问题会让一些人跑掉，而其他人会随意点击绕过问题，污染数据，使其一文不值。”

字段标签是指上面、侧面或表单字段内的缩微副本，指示每个表单字段的名称。

例如，在下面的表单中，两个字段标签分别为“电子邮件”和“密码”（位于表单字段的顶部）：

在标签放置方面，您有三个主要选择：

• 在顶部（左对齐）
• 内联（左对齐）
• 字段左侧（右对齐）

让我们回顾一下。

在顶部（左对齐）

标签放置在表单域框上方并被推向左对齐。

例如，我们刚刚展示的 SEMRush 帐户创建表单（上图）将表单标签放在字段顶部，与左侧对齐。

在转换方面，研究表明表单字段顶部的左对齐标签转换率最高。 为什么？ 因为它们是最容易和最快的填写。

例如，使用眼动追踪软件，您可以看到表单域顶部的左对齐标签使访问者的注意力集中在表单域和认知负荷有限的标签上：

内联或“内场”（左对齐）

标签放置在表单域框内并被推向左对齐。

例如，下面的 Bob HR 表单将字段标签放置在字段框内：

内联字段标签适用于这样的简短表单，尤其是当您只要求提供姓名或电话号码等基本信息时。

但是对于具有更复杂表单字段的较长表单，内联表单会带来用户体验的噩梦，尤其是在移动设备上。

为什么？

一旦你点击一个框，标签就会消失。 如果您忘记了标签上的内容，那么再次查找的唯一方法是删除整个条目并重新开始。 哎呀。

字段左侧（右对齐）

标签放置在字段框的左侧（在其外部）。

虽然不如放置在表单域顶部的标签高效（因为访问者需要将视线从左到右、上下移动），但放置在表单域左侧的标签也需要有限的认知负荷。

要点：将字段标签放在表单字段的顶部（左对齐）以获得最佳效果。 如果您想要两全其美，请尝试在有人开始输入后移动到表单字段顶部的内联表单标签，如下所示：

无论您选择哪个选项，请注意以下事项：

• 使用纯文本标签：粗体标签可能听起来很诱人，但它们更难阅读
• 空白：确保您的表单字段和标签之间有足够的空白
• 文本对齐：为减少认知负担，将字段标签放置在字段左侧时使文本右对齐，将字段标签放置在顶部或内联时左对齐文本
• 接近度：无论您做什么，都将标签靠近其表单字段

占位符文本是放置在表单域（通常为浅灰色）中的提示、描述或示例，一旦有人开始输入就会消失。 占位符文本就像一个内联标签，只是代替标签名称，它是实际提交的示例。

例如，Oscar 在其每个潜在客户捕获表单字段中使用占位符文本：

一项又一项的研究证实，使用内联占位符文本会导致糟糕的用户体验并减少表单转换。

为什么？ 这是一个不必要的负担，真的。

• 与内联标签一样，一旦您开始输入，占位符文本就会消失，如果访问者忘记占位符提示文本，他们就会强制删除他们的条目
• 如果出现错误消息，访问者不知道如何解决问题
• 内联占位符使空字段不那么明显。 眼动追踪软件显示，人们的眼睛被空盒子吸引，而不是被填满的盒子
• 颜色对比度差使它们难以阅读，特别是对于视障人士

该怎么做？

如果您觉得需要为每个表单提供说明（这可能非常有意义），请将说明放在字段标签下方但在表单字段顶部。 例如：

点击触发器是放置在表单 CTA 或提交按钮下方或周围的一小段诱人的副本，旨在消除疑虑并推动访问者进行转换。

例如，这个 Lusha 登录页面使用其星级和评论总数以及“无需信用卡”来提醒访问者为什么他们应该点击“免费开始”按钮。

或者来自 ContentVerve 的这个较早的示例通过在其选择加入表单中添加一些与福利相关的要点，看到电子邮件通讯订阅增加了 87%：

要点：使用点击触发器来预测和处理潜在客户对表单另一面的反对意见。

Microcopy 是一个广义的术语，指的是表单中用于指导或通知访问者的小片段。

从技术上讲，点击触发器、字段标签和占位符都是表单缩微文案的示例，但在这种情况下，我们专门讨论的是缩微文案，它通过告诉访问者您为什么需要某些信息或您将如何使用来帮助减少摩擦用它。

虽然存在很小，但微文案可以对表单转换产生巨大影响。

例如，下面是一个表单缩微副本的示例，它告诉访问者为什么他们需要一个电话号码来完成他们的电子商务购买（因为许多人可能会发现这些信息没有必要并放弃）：

另一种常见的微拷贝类型包含如下错误消息：

显微拷贝会转换吗？ 你打赌。

例如，由于成本是人们放弃购物车的第一大原因，Yoast 在他们的结账表单中添加了“不会有额外费用”这一短语，并将转化率提高了 11.30%。

或者这个例子来自一位前 Hubspot 的 UX 设计师，他发现交易没有完成是因为人们输入了错误的地址。 通过添加一行缩微副本，他显着增加了表单转换（并降低了客户支持成本）。

要点：访问者并不总是知道您为什么需要信息、您将如何使用信息或输入正确信息的重要性，除非您告诉他们。 在表单界面中引入显微文案，以对冲困惑或忧虑的前景。

如果没有令人信服和诱人的 CTA 来激发行动，任何形式都是不完整的。

当谈到形成号召性用语按钮时，有两件事比其他一切都重要：复制和对比。

首先，发送、提交、开始、支付或激活等通用 CTA 是我们所说的“努力按钮”； 他们让参观者觉得前面有一些费力的事情。 不惜一切代价避免。

相反，选择基于价值的按钮，如接收、获取、享受、查看或发现，所有这些都让访问者觉得奖励（而不是努力）在表单的另一边等待。

例如，Jarvis 提供了一个清晰、引人注目、以行动为导向的 CTA，您会忍不住点击：

对更多感兴趣？ 对于基于值的按钮，我们还有 61 个额外的想法。

其次，增加表单转换与按钮的颜色关系不大，更多的是与按钮和背景的颜色对比有关。

例如，在我们的客户 Darwin Homes 的案例研究中，A/B 测试 CTA 按钮颜色有助于将 CPA 降低 45%，并将转化率提高 22%。

要点：为您的表单按钮 CTA 副本添加明显的好处（并完全避免通用 CTA），并确保您的按钮通过与背景形成对比来引起注意。

还记得我们讨论过多步骤表单以及它们如何通过使表单更容易开始来将访问者从一个阶段微转换到下一个阶段吗？

这同样适用于您的表单按钮。

与其在着陆页中嵌入表单，不如尝试在其位置放置一个 CTA 按钮，然后在弹出式灯箱中打开表单或在点击后将流量发送到转换页面。

在 Aweber 的一项研究中，他们发现将表单放在弹出按钮后面而不是将其嵌入到目标网页中，可以将转化率提高 1,375%。

在 Hubspot 的一项研究中，他们发现将表单替换为 CTA 按钮会导致专门的选择加入页面提高了 0.4% 的转化率（从 2.4% 到 2.8%）。 这听起来可能不多，但在数千次访问的过程中，这相当于数百次转化。

例如，Intercom 和 AllHands（下图）都将其登录页面表单放在弹出按钮后面：

外卖：一如既往，测试一切。 但是在按钮后面隐藏一个令人生畏的表单将使访问者更容易迈出第一步。 一旦我们迈出第一步，我们就有更高的迈出下一步的倾向。

自动填充表单是指使用访问者的浏览器数据自动填充（或自动完成）姓名、电话号码、信用卡信息和地址等字段的表单，而不是强制访问者自行填写。

根据 Google 的说法，自动填充可以使您的表单填写速度提高 30%，从而提高转化率。

要点：没有人喜欢填写网络表单，尤其是在移动设备上。 使用自动填充来减少摩擦并增加转化率。

您是否曾经填写过表格，却发现忘记在区号周围加上括号，或者在信用卡号之间添加了太多空格——然后您不得不重新开始？

相同的。

为了使您的表格更易于填写（并减少认知负担和限制格式错误），不要让您的潜在客户猜测他们是否需要添加破折号、括号、逗号、斜线或两者都不：自动格式化您的字段，所以不需要无论访问者如何输入信息，格式都会自行纠正。

例如，当您添加更多数字时，此表单字段会自动格式化美元值：

更好的是，您可以使用一种称为“文本屏蔽”的功能，它不仅可以正确地自动格式化值，还可以提供内联占位符，告诉您还需要输入多少内容。

要点：对日期、电话号码、信用卡号码或任何其他可能需要特定格式的数值（例如价格、收入）使用自动格式。 它不仅会减少格式错误并增加转换，而且还会确保表单提交数据看起来都一样。

社交证明是指第三方评论、推荐、星级或任何其他可信的徽章，表明其他人在您的产品或服务上取得了成功。

为什么社会证明很重要？ 66% 的客户表示，社会证明的存在增加了他们购买的可能性。

为什么社会证明如此有效？ 因为当人们对承诺产生怀疑或对选择不确定时，他们会从已经做出相同选择的人那里寻找灵感。 而且通常情况下，他们会选择别人选择的东西。

如果您认为您只需要在实际登录页面上进行社交证明，请再想一想。

在表格附近或周围放置诸如星级、推荐或客户徽标等社交证明，以提醒人们他们做出了正确的决定。

尤其是对于点击页面（即点击到结帐页面或帐户创建页面等转换页面的登陆页面），也要在表单旁边放置社交证明。

例如，Jarvis 将客户数量和客户徽标放在他们的帐户创建表单旁边：

InvisionApp 还在他们的表格旁边提供了社交证明，这一次是他们的一位客户（优步）的推荐形式：

要点：在您的表单周围或附近使用 Pepper 社交证明来提醒访问者为什么他们应该继续前进。

如果不需要表单字段，请先问问自己是否真的需要它。 如果不这样做，请完全消除不必要的字段。

但是，如果您认为可选字段是必要的并且需要将其与必填字段并列，请遵循以下最佳实践：

• 用红色星号标记必填字段：它需要是红色星号吗？ 不可以。但是红色星号是必填字段的标准，您的用户会期望它。
• 在标签左侧放置星号：通过在标签前放置星号，访问者可以轻松地从上到下扫描表单左侧的必填字段。
• 考虑一个“必填”标签：如果您想在星号之外添加一个“必填”标签，最好将文本放置在字段之外（即在表单字段的顶部）而不是内联。
• 也标记可选字段：标记可选字段还有助于减少认知负担，因为访问者不需要推断可选性； 相反，表格会明确地告诉他们。 没有必要，但一个不错的奖励。
• 避免不标记必填字段：在某些情况下，您可能认为没有必要标记必填字段。 不要这样做。 始终标记必填字段。

要点：必填字段标签没有任何性感之处——这正是你不应该对它们变得可爱的原因。 根据雅各布定律，由于您的网站访问者将大部分时间花在其他网站上，他们希望您的网站遵循与其他所有人相同的用户体验基本原则。 任何偏差，你都会在他们的心智模型中发挥作用。

这是不言而喻的，但由于现在超过 50% 的互联网流量来自移动设备，如果您的表单没有针对较小的屏幕（移动响应）进行优化，您可能会大量转换。

移动优化表单是什么样的？ 轻按四下并滑动即可预订酒店怎么样？

在针对移动设备优化表单时，适用与我们刚刚在本文中概述的规则相同的规则，只是它们的影响被放大了。

例如，人们对桌面上放置不当的字段标签几乎没有耐心，但他们会让你休息一下，因为在更大的屏幕上很容易找出和导航。

然而，当谈到移动设备时，人们对可用性摩擦的容忍度要低得多，因为笨拙的拇指和小巧的外形已经造成了不愉快的体验。

在为移动设备设计表单时，应用我们在本文中已经概述的相同最佳实践，以及以下内容：

• 更大的文字
• 更大的 CTA 按钮
• 字段之间和按钮周围有更多的空白（因此它们很容易触摸）
• 没有下拉菜单，请选择单选按钮（在移动设备上填写下拉菜单的时间最长）
• 在弹出窗口中选择嵌入式表单或单独的表单页面

要点：单列布局、多步骤、进度条、自动填充、字段标签……这一切都适用于移动设备，只是在较小的屏幕上。

条件逻辑允许您根据访问者的回答动态自定义表单体验。

尽管每个人都会从同一个问题开始填写表格，但根据他们的回答方式，他们可能会在两个非常不同的地方结束。

条件逻辑通过缩短表单、减少每个问题的选择数量（即消除不必要的步骤）以及创建更加个性化的表单体验来增加转换。

要点：基本的潜在客户表单不会从条件逻辑中受益，因为它不需要足够的个性化信息。 但是对于较长的表格、申请表格或潜在客户资格表格，条件逻辑可以将原本噩梦般的表格变成愉快的体验。

您的访问者填写表单所需的工作越少，他们填写表单的可能性就越大。 时期。

据 CXL 称，在运行测试以查看单选按钮或下拉菜单是否更容易填写后，他们发现受访者填写单选按钮的速度比下拉菜单快 2.5 秒。

与单选按钮一样，复选框也更容易填写。

有什么不同？ 单选按钮适用于多个选项互斥的情况（即您只能选择一个选项），复选框适用于您可以选择多个选项的情况。

我们过去也曾在多步骤表单上使用下拉菜单，然后将它们换成复选框。 现在，填写我们的表单（尤其是在移动设备上）不仅更容易、更快捷，而且我们也获得了更多的转化。

要点：在大多数情况下，选择单选按钮或复选框而不是下拉菜单。 但是，锻炼常识。 如果您有几十个选项，例如选择一个州或国家/地区，那么包含 50 多个单选按钮是没有意义的（这不会减少任何人的认知负担）。 相反，选择下拉菜单。

尽管有大量证据支持上述高转化着陆页表单的元素，但您仍然应该自己进行 A/B 测试。

为了让生活更轻松，它也有助于形成分析。

没错，实际分析可以在用户遍历您的多步表单时测量用户行为。

我们最喜欢的一些表单分析工具：

• 鼠标流
• 祖科
• 热罐
• MonsterInsights（WP 插件）

使用我们在本文中概述的最佳实践构建您的登录页面表单模板。 然后依靠您的表单分析来揭露任何泄漏。 然后测试不同的补丁。 瞧。

无论你做什么，除非你真的需要它们（看看你，Expedia），否则不要将这些可选字段放在你的表单中。