构建完美的 WordPress 联系表:6 条牢不可破的规则
您会尽一切努力建立一个能够引导访问者进行转化的网站.在您研究分析时，您很高兴看到您创建的用户旅程一次又一次地被这些访问者采用.然而，有一些东西阻止他们转换.在这份高级联系表单指南中了解它是什么.
联系表单是访问者旅程的重要组成部分.
即使您已经在网站提供的任何内容上有效地销售它们，但如果执行不当，联系表单实际上可能会破坏他们的体验.
破碎的按钮、混乱的字段、太多的步骤、杂乱无章的界面……哎呀，即使是联系表单的位置都可能破坏用户体验.
可能会出错的地方很多，在本文中，我们将尽最大努力向您介绍如何避免这些问题.
更具体地说，我们将向您提供我们的……
构建完美联系表单的 6 条规则
但是请稍等，先快速 PSA...
在我们继续之前，您应该知道这是对 WordPress 联系表单世界的深入了解.
如果您想要一个简单的介绍，我们的联系表单入门帖子是一个很好的起点.
然后，一旦您知道需要为您的网站创建更多联系表单，下一步就是选择正确的联系表单插件，让生活更轻松.
一旦您完成了这些事情，我们认为您就已经为接下来的高级信息 (heh) 做好了准备.
继续……
用户登录.会员注册.电子邮件订阅.报价请求.问卷.支持请求.订单和付款表格.
在 WordPress 网站上使用联系表单的方式有很多种.然而，没有改变的是，如果您希望联系表单表现良好，您必须遵守的规则.
2014 年发布的 Google 眼球追踪研究表明，遵循表单设计最基本的可用性指南将显着改善用户体验.
具体来说，当联系表单遵守所有规则时，78% 的用户可以一次性完成并提交.然而，当联系表单违反这些规则时，只有 42% 的人能够在一次尝试中做到.
想知道这些规则是什么?然后继续阅读.
规则 1:专注于一致性
正如您将在此处的其他一些规则中看到的那样，人们通常关心联系表单的长度，这往往会导致糟糕的设计选择.
以对齐问题为例.
您可能会在 BrainTraffic 网站上看到类似这样的表格，然后想，"嗯……但填写这个表格是不是有点太长了?"
您可能会考虑解决这个"问题"的一种方法是将标签移到左侧并将答案字段放在右侧.
但是，用户体验专家会告诉您这是一个主要的禁忌，因为它会影响表单的可扫描性.
如果您考虑将字段水平放置，则同样适用.
基本上，如果您偏离顶部标签/字段下方的结构，则会在用户体验中产生摩擦.
早在 2010 年，就发布了一套关于网页表单设计的指南，名为"万维网中简单但重要的用户界面:介绍 20可用网页表单设计指南".
Google 在 2014 年选择了这些指南，并通过 眼球追踪研究.
在他们的许多发现中，他们得出的结论是，在每个字段顶部放置标签的左对齐表单可以改善用户体验.
如果您希望您的联系表单遵守这个简单的对齐规则，您需要执行以下操作:
- 左对齐所有标签、表单字段和主要号召性用语按钮.
- 切勿水平对齐相关字段.您可以按逻辑构建表单，但每个问题或字段都需要垂直堆叠.
- 任何包含多项选择题(少于六个选项)的字段都应显示在项目符号或复选框的垂直列表中，而不是显示在下拉菜单中.
这种设计不仅有利于用户体验，而且有助于您的网站弥合桌面和移动体验之间的差距(尤其重要的是，当您努力为 Google 的移动优先索引).
规则 #2:包括所有相关字段
在设计联系表单时，您可能认为越短越好，对吧?
实际上并非总是如此.最重要的是您向用户提供所有必要且相关的字段.
Unbounce 的高级转化优化师 Michael Aagaard 进行了演讲 在 2015 年解决了这个问题.
他和他的团队想知道如果他们缩短此联系表格会发生什么:
如您所见，他们删除了他们认为不必要的字段，以简化填写表单的过程.
但是，在结束测试后，他们发现使用较短格式的转化率下降了 14%.
之后，他们研究了联系表单上哪些字段的交互作用最高和最低.
使用原始的较长设计，他们重新排列了这些字段并更新了标签以阐明需要什么类型的信息.
他们重新进行了测试，发现重新标记和重新组织的长格式版本的潜在客户提高了 19%:
不过，这些测试的结果并不总是如此.
例如，Expedia 发现 联系表单中有一个字段是"公司"，这让客户感到困惑.
这是可选的，但用户不一定理解这一点，进而填写错误的信息，最终导致他们的购买被拒绝.
当 Expedia 意识到这个问题时，他们移除了该字段，并在第二年增加了 1200 万美元的收入.
我建议，在构建您自己的联系表单时，从 QuickBooks 在这里所做的基本字段开始:
如果您发现转化次数与预期不符，请研究分析，看看您是否可以确定哪些字段会阻止用户填写表单.
规则 3:简化输入
无论您的用户是使用桌面设备还是移动设备与您的联系表单互动，或者他们是否需要辅助技术来帮助他们完成此操作，表单都应配备以简化输入过程.
以下是您应该了解的一些技巧:
标签
对于桌面用户和有可访问性问题的用户，请确保您的联系表单包含 逻辑 Tab 键顺序 已启用.
输入掩码
您可以 使用输入掩码对它们进行编码，在用户键入时自动格式化它们.
这种类型的自动格式化还可以减少点击次数(尤其是当电话号码或信用卡等字段被分成多个字段时)和更快地完成表单.
输入类型
HTML 输入类型 将帮助用户在键入时看到正确的键盘选项在移动设备上，让他们不必从头开始输入所有内容(例如电子邮件的".com").
Google 自动完成
与其将每个字段编码为根据它需要满足的标准自动格式化，不如使用 Google 地址自动完成插件.
它不仅可以帮助您避免处理拼写错误和格式不正确的地址，还可以让您的访问者不必输入大部分信息.
条件逻辑
如果您担心联系表单的长度——尤其是当它针对不同的用户类型并满足各种目的时——您可以使用条件逻辑来保持它的简短.
一旦用户选择了他们特定的"条件"，表单的相关部分才会暴露出来.
许多联系表单插件都为此提供了扩展.例如，这是 Forminator 的一个.
面包屑
联系表单的面包屑或进度条不一定要简化填写表单的过程.
然而，它确实有助于鼓励用户完成它，因为剩余的步骤已经明确定义.
再一次，这是一个使用 Forminator 的 Pagination 元素的进度条示例:
规则 4:拼写所有内容
虽然我意识到这条规则与极简主义背后的基本原则背道而驰，但您应该密切注意这一规则，以免不必要地让访问者感到沮丧.
让我解释一下:您有一个看起来很简单的联系表单.
您的用户根据标签建议填写并点击提交按钮.
然后他们收到那条丑陋的红色信息:"你做的不对！返回，修改表单，然后重新提交！"
您可能已经作为用户遇到过这种情况，并且您知道这有多令人沮丧，尤其是当您输入的某些信息在抛出错误时丢失时.
因此，不要让用户猜测需要修复什么以及如何修复，不要让它发展到那个地步.
一路拼写所有内容:
- 提供现场焦点(尤其是在移动设备上)，以便用户准确了解他们在填写表单的过程中所处的位置.
- 如果您不使用输入掩码来自动设置字段格式，请写出任何格式要求.
- 明确说明字段何时为"可选"(使用该词，而不是红色星号).
- 让用户能够在输入密码字段时显示或隐藏密码字段.
- 在用户参与某个字段后立即显示错误消息.不要等到最后才去做.
在前面提到的 Google 眼球追踪研究中，他们对参加测试的用户进行了跟进，发现缺乏格式通常被指定为投诉.
Google 建议在整个表单中提供清晰的指南以及高度可见的错误消息.此外，这些标签不应只是标准的红色字体.
它们应该有轮廓、颜色和粗体.
规则 #5:远离提示
联系表单中的提示文本如下所示:
看看 Target 如何在字段中放置标签?在某些联系表单中，当用户点击某个字段时，这些标签/提示就会消失.
Target 的处理方式略有不同，而是将标签移至字段框的顶部(请参阅"电子邮件地址").
不管如何处理，可用性专家——比如 Nielsen Norman Group——会告诉你这是一个糟糕的设计实践，因为:
- 这对于同时处理多项任务、分心或太快进入下一个字段的用户来说是有问题的.当提示消失时，用户必须退出该领域才能重新发现需要什么.
- 消失的提示还会阻止用户返回表单以检查他们的工作或修复错误，而无需完全删除响应以查看下面的内容.
- 用于占位符提示的浅灰色文本不利于阅读.
- 带有提示文本的字段可能会与已填充数据的字段混淆，让用户跳过这些字段、提交表单并收到错误消息.
- 某些屏幕阅读器工具无法读取占位符提示文本.
根据 NNG，用户发现空字段比包含提示文本的字段更有吸引力.
虽然将这些标签或描述符放在字段上方可能会使您的表单看起来更长，但它会提高可用性.
规则 #6:看看你的按钮
WPMU DEV 已经有一个很棒的设计更好按钮的指南，所以我不打算重复.相反，我想专注于您可以做的几件事来改进您的联系表单按钮.
对于初学者，始终将主要 CTA 与表单字段对齐，即使它看起来不合逻辑.
例如，如果您有"下一步"和"返回"按钮，则"下一步"应显示在最左侧，因为这是大多数用户将要执行的操作.
另外，尽量不要使用"重置"、"清除"或"取消"按钮.许多用户到达表单底部并自动点击他们看到的第一个按钮，认为这是提交按钮.
如果他们因按错按钮而丢失所有答案，您可能会发现他们不愿意重新提交.
在这个 来自 Unbounce 的 A/B 测试，他们发现价值驱动的文案(即使更长)在转化用户方面更成功.
更新后的副本获得的转化次数比原始消息多 31%.
最后，在必要时在联系表单按钮周围使用信任标记.
关于不需要信用卡的 CoSchedule 声明就是一个很好的例子:
但是要小心.如果您在不需要时使用信任标记，则可能会误导用户相信他们必须在实际情况并非如此时交出敏感信息，例如 来自 Behave 的 A/B 测试 演示:
版本 B 收到的提交量比版本 A 多近 13%，因为安全封条让用户相信他们最终必须通过网站提交付款或其他敏感信息.
应用 In(Form)ation 的时间
联系表格并不是万能的.
每个网站(以及网站背后的业务)都有不同的目标，因此，其中的联系表单需要专门用于帮助实现该目标.
如果您想在朝着这些目标努力的同时正确执行上述规则，您有两种选择.
您可以找到一个 WordPress 插件来帮助您创建自定义 WordPress 联系表单，或者您可以建立自己的.
像 WPMU DEV 的 Forminator 这样的插件为您提供两全其美(而且是免费的！)
安装插件并选择一个模板作为开始，然后使用一系列强大的自定义选项和设置构建满足您特定需求的表单.
无论您做出什么决定，请记住，用户不一定害怕冗长的联系表单，更多的是您在表单中为他们创造的体验有多好.
