如何在 WordPress 中设计和创建用于增强 UX 的表单

尽管在每个网站上都是至关重要的方面，但每个人都讨厌在网络上填写表格，这是一个公开的秘密。

但是问题来了……

为什么这些在线表格被讨厌？ 是什么让他们如此烦人？

答案有点简单明了。 简而言之，这是设计不佳和放置不当的结果； 总之，糟糕的用户体验是罪魁祸首。 今天，在本文中，您将学习如何设计更好的表单，然后相应地创建以确保出色的用户体验。

如何设计更好的表单并使用良好的用户体验创建它们？

大多数在线互动都发生在在线表格上，对于任何类型的在线业务来说都是必不可少的。 因此，如果您有在线业务，则需要注意设计并了解表格的最佳使用方式。

在继续深入之前，让我们以表格格式制作一个列表：

现在来看看战术 在在设计和使用表单以获得更好的用户体验时要遵循的细节。

设计真实的表格

大多数时候，这些表格看起来很无聊并且缺乏真实性，因为它们的设计方式粗心且不专业。 您有必要让您的用户了解表单的用途。

让用户填写表单的第一步是获得他们的信任并提供一个目的！

用户不倾向于提供关于他们自己的信息。 为什么会有人将他们宝贵的数据交给一个无法建立信任感的陌生人呢？ 在这种情况下，您需要确保他们提供的信息安全无虞，以及您将如何使用这些信息。

当您设计更好的表单时，您可以部署 Google Captcha 或 Goggle reCAPTCHA，因为它们可以防止网络表单被垃圾邮件操纵。 您将看到被垃圾邮件的结果将被删除，最重要的是，用户会觉得填写表格很舒服。

返回索引

列布局和部分对齐

关于眼动追踪的研究表明，单列表单优于多列表单。 通常，我们倾向于在向下滚动网站时填写表格：从上到下移动，这是我们关注内容的方式 通过gh。

在这种情况下，具有多列的表单可能会导致用户误入歧途，并使他们从内容中分心。 具有平行列的表单可能会中断流程并中断，但保持单一布局可能更方便。 此外，单列表格完成速度更快，并将置信度提高到 95%。

返回索引

保持表格简单明了

简单具有使任何事物感觉真实和友好的与生俱来的力量。 设计 Web 表单也是如此。 尝试简化 Web 表单并制作简单易行的沟通方式。 进行研究，如果需要，请简要研究是什么使表单成为其用户的障碍。

有研究表明用户对将信息提交到表单中的冷漠。 这意味着如果表单设计和管理不当，您可能会面临失去转化的风险。 这就是为什么保持表格看起来简单且易于填写是明智之举。

返回索引

提出最相关的问题

为确保用户对填写表格感兴趣，请只询问您真正需要的内容，以免他们感到无聊。 这应该立即实施以确保更好的用户体验。 使其最小化以获得最大的结果。

有一件事，在设计表单时，您必须记住，表单中输入字段的长度和数量是需要考虑的一些关键组件。 因为表单的长度与丢弃率成正比。 这意味着您在网站上粘贴的表格越长，您可以预期的流失率就越高。

有一次，尼尔帕特尔在他的一篇文章中透露，他说他能够通过从他的联系表单中删除一个表单字段来将转化率提高 26%。 因此，请确保您的联系表格包含最相关的问题。

创建多步骤表单

设计用于创建多步骤表单的 Web 表单可能是另一种提高用户参与度和减少表单烦人的好方法。 这意味着将表格分成多个步骤可确保在填写表格时减少疲劳。

在设计创建多步骤表单时，尽量在第一步中保留不超过 2-3 个字段。 除此之外，表单的进度条还可以激励用户完成整个表单填写过程。 这不会在填写表格时造成任何干扰。

返回索引

内联表单验证

您的在线表格的设计方式应确保从用户那里收集最有效的信息。 例如，如果有人提供了无效信息，表格将在错误时显示红色信号。 此事件最终会在填写表单时帮助用户。

如果将验证放在表单中，会有很多好处。 其中一些如下：

• 验证可帮助用户在填写表单时了解错误。 这确保了他们使用表格提供的数据的准确性。
• 它还为用户提供了一种信任感。 成功完成的表格填写会通过令人鼓舞的视觉反馈来竖起大拇指。
• 用户提供准确有效的信息的同时，接收方也获得了真实的数据。

提供备用选项

当您为用户提供一种在您的网站上注册的方式时，请保留一种或多种替代方式来实现这一目标。 这肯定会增加您的用户填写相应表格的兴趣。

提供替代选项的最佳方式是允许您的用户通过 Google、Facebook、Twitter 或其他媒体登录。 总体而言，您可以将这个想法定义为在设计表单时需要付诸实践的“少即是多”的理念。

返回索引

相应地放置表格

设计 Web 表单后，是时候将它们放置在正确的位置了。 这将增加用户的参与度，并有助于让合适的人信任您提供的服务。

一些统计数据显示，当您将表单放在顶部位置时，参与时间通常会达到峰值。 当他们访问您的网站时，这首先会吸引您的用户的注意力。

但同样，在用户看到您的页面内容之前放置订阅表单可能过于咄咄逼人，并且会惹恼用户。 简而言之，对于您应该将表单放在页面上的哪个位置没有固定规则。 它取决于多个变量，例如特定页面的目的、您的业务目标、受众的一般行为等。

基本上，您必须在目标和用户可能需要的内容之间取得平衡； 并相应地放置表格。

返回索引

发出强烈的行动号召

统计数据显示了一个令人惊讶的事实，即 72% 的 B2B 营销人员在其内部页面上没有号召性用语。 确保你有一个强有力的、引人入胜的号召性用语。 在设计表单时请记住，CTA 是转化率和跳出率之间的临界点。

一个合适的 CTA 最终会获得大量点击，因为它迫使用户采取积极行动。 此外，太多的 CTA 也会让人感到困惑，您需要确定您提供的内容是什么，并且 CTA 的副本必须显示出来。

总体而言，CTA 的大小、颜色和文本必须很重要，这样才能产生影响。 您可以使 CTA 与您的品牌声音和语气保持一致。 尝试营造一种紧迫感，可以对总用户产生影响。

返回索引

标签放置

标签告诉用户他们需要放入输入字段的信息。 基本上，它们位于表单域之外。 就像表单放置本身一样，标签放置对于在何处以及如何对齐和放置它没有任何明确的指导。 这主要取决于情况和要求。

表单设计者可以隐藏标签来为表单设置动画，而不是使用占位符。 但最常见的是定位在表单域之外。 您还可以对齐标签以引起用户的更多关注。 左对齐标签通常会得到用户的更多关注。 因此，请确保您已相应地设计了表单标签。

返回索引

添加自动填充

如果用户已经在相关字段中注册了您的服务，请考虑自动填充。 这将节省您在填写任何特定表格时可能面临的时间和不必要的负担。

您还可以使用地理位置自动填充一些输入字段。 这将帮助他们快速填写表格。 在这种情况下，请确保所有输入字段都可用于自定义，并在填写相应表单时为他们提供最大控制。

返回索引

GDPR 友好表格

使您的表单对 GDPR 友好，以便它们在欧盟 (EU) 规定的范围内运作。 这是当今最重要的方面之一，将确保您的业务免受欧盟法律的影响。

尽管 GDPR 如何影响您并不清楚，但它可能是任何类型组织的破坏源。 对此进行适当的研究，或者您可以咨询处理 GDPR 的专家。学习有关如何使您的网站 GDPR 友好的更多信息。

另请阅读：如何使用 WordPress 插件使您的网站对 GDPR 友好。

返回索引

各种各样的

除了上述问题之外，还有一些其他问题需要考虑以在您的网站上拥有更好的用户体验。 让我们看一下下面的清单：

• 一些统计数据表明，表单字段上的占位符通常会损害可用性，有时这会使表单填写过程复杂化。 但有时保留唯一的占位符代替字段标签可能是一个不错的选择。 这取决于实际情况。 例如，在订阅时事通讯的情况下，我们只能使用占位符而不是标签。
• 不需要或没有必要同时保留标签和占位符。
• 如果需要，应将字段标签及其输入字段进行可视化分组，以帮助用户更轻松地理解表单。 在这种情况下，要小心松散的填充物，它们有时可能会成为一种嗡嗡声。
• 您可以强调自动对焦以突出显示起点。 这将帮助用户正确启动。
• 大写字母难以阅读； 将标签写在两者的组合中是明智的。 有时按钮文本可以用大写字母书写。
• 该按钮旨在采取用户的直接操作。 因此，按钮设计应特别考虑。 应在附加字段后设计和创建按钮。
• 不要忘记合并屏蔽输入以使表单填写更容易。
• 使用单选按钮而不是使用下拉菜单是明智的。 这将加快表单填写过程。 它使表格填写过程变得简单流畅。
• 为用户保留密码预览选项或机会，以便在按下提交按钮之前检查他们的信息。 在这种情况下，您还会通知用户按下了大写锁定按钮。

返回索引

结束前

表单是网站中最不可或缺的部分之一。 这就是为什么设计表单然后创建表单可能是在您的网站上拥有良好用户体验的关键方面。 在设计表单之前，您需要从用户的角度来看待事物。

WP Fluent Forms Pro

立即试用 Fluent Forms，亲眼看看！

现在下载

使所有表格从头到尾都简洁明了，让用户轻松填写整个表格。 从相关资源中进行适当的研究，并尽最大努力。 由于表单是转换成就的重要组成部分，因此请确保用户能够快速顺利地通过它们。

结论

由于表单是您网站的重要组成部分，因此您需要小心设计和创建它们。 在设计 Web 表单时，推动 A/B 测试并检查所有当前的营销趋势始终很重要。

此外，您应该确保您创建的所有表单都适合移动设备。 可以说，如果您遵循我们在此处讨论的策略，那绝对是您网站的最佳选择。

作为我的建议，如果您想使用任何 WordPress 表单构建器插件，请确保您使用 WP Fluent Forms 来改善您在 WordPress 中的用户体验。 我希望这篇文章能帮助您更多地了解如何在您的网站上设计表单以改善网站用户体验。 如果您对上下文有任何疑问，请在下面发表评论，让我知道您的担忧。 希望我会尽快回复您。

一些很酷的推荐读物：

? TypeForm 替代品

? Caldera Forms vs. WP Fluent Form

? 提高用户参与度