您是否曾尝试在网站上填写表格，但在填写时感到困惑或不知所措？表单字段标签和字段本身的位置没有任何意义吗？表单的标题和提交按钮是否不在您容易发现的位置？

这些因素，以及其他几个因素，是web表单布局的主要方面，有可能增强或降低其用户体验（UX）。通过实施一个成功的布局，你将为你的访客创造一个很棒的体验，并在他们和你的品牌之间建立一种积极的、希望是持久的关系。本指南中的

将回顾六种更佳web表单布局实践以及每个实践的示例，以帮助您开始。但首先，让我们回顾一下什么是web表单布局，以及为什么它如此重要。什么是网页表单布局？Web表单布局是指表单的各个方面的排列方式，以及表单在给定网页上的放置位置。您的web表单的布局应该经过深思熟虑的组织，看起来既简单又专业。

为什么web表单布局很重要？几乎每个网站都有某种网络形式。web表单布局对表单转换的效果起着很大的作用。这是因为出色的表单布局可以无缝完成表单，并改善访问者的提交过程。由于你创建了一个不费吹灰之力、既专业又周到的网络表单，访问者将很容易转换。

相比之下，规划不当的布局会导致令人困惑且难以完成的表单，这可能会让访问者感到沮丧，甚至导致他们完全放弃你的网站，从而降低转化率。

既然我们理解了为什么正确的web表单布局是如此重要，那么让我们深入探讨如何为web表单创建更佳布局。以下是安排内容时要遵循的六个更佳实践。

表单布局：6个更佳实践和遵循的好例子我们策划了这个更佳实践列表，适用于几乎所有类型的web表单。我们还提供了每种实践的好例子，以帮助您更好地将这些概念应用到自己的表单中。

1。使用单列布局

当涉及到布局时，您应该尽可能简单地保持所有字段的位置和顺序。这意味着您应该使用单列布局。通过这种方式组织字段，访问者不会错过字段，他们会按照最合理的顺序完成字段，并且他们能够比使用多栏表单更快地提交表单。

很好的例子：Source

这个例子向您展示了单列格式应该是什么样子。布局尽可能的流线型、直截了当和极简主义，这正是你想要的。这样一来，你就减少了访问者浏览表单所需的时间，而且不会出现错误或混淆。

2。将副本向左对齐将所有表单字段对齐到网页的左侧。这是最自然的布局方式，因为这是绝大多数人学习阅读内容的方式——从右向左移动。如果不使用内联表单字段标签（直接位于表单字段本身），还应将标签向左对齐。同样，这种自然的流程将帮助访问者更高效地完成表单，而不会对哪个标签属于哪个领域感到困惑。

很好的例子：

源

这张照片描绘了表单字段和标签的左侧对齐。该表格的组织方式使访客清楚明了，因此允许快速完成和提交流程。毫无疑问，哪些标签属于哪些字段，从右到左遍历表单既自然又轻松。

3。创建时使用单页布局在你的表单中，你应该使用一页的布局，这样每页上只有一个表单。如果您有一个简短的表单，那么所有内容都应该可以轻松地放在一个页面上，使其成为一个易于实现的布局。

如果你有很多表单字段，你应该把它们分解成一个多步骤的表单。当您这样做时，将有多个网页，其中包含表单的不同部分，这使得访问者需要完成的工作量看起来更易于管理。（如果你有一个多步骤表单，你也可以在页面顶部添加一个进度条，这样你的访问者就知道他们还要花多长时间来完成它。）

很好的例子：

源

由于访问者需要填写大量表单字段，这是一个跨三个独立网页的多步骤表单。通过这种方式组织表单，查看和完成表单不会让人觉得这是一个漫长而乏味的过程。

不是查看一长串需要填写的表单字段，而是一次只查看几个字段，这会让表单感觉不那么沉重。（页面顶部的进度条也有助于实现这一点，特别是因为它清楚地标记了访问者需要浏览的网页的名称。）

4。创建一个移动友好的布局如今几乎每个人都随身携带某种类型的移动设备。无论他们是在外出、旅行、通勤，还是仅仅坐在舒适的家中，人们都在注册你的时事通讯、注册帐户，并通过他们的智能手机和平板电脑购买你的产品，这已经不是什么秘密。这就是为什么你的网站包含移动友好表单的原因。

很好的例子：

源

这个例子展示了成功的移动表单布局的许多重要方面。该表单在小屏幕顶部有一个清晰的标题，一个添加（或扫描）信用卡信息的清晰而简化的选项，这样访问者就不必在这么小的键盘上输入我们的一系列数字，一个简单、单列、多步布局、极简设计等等。此表单的布局方式允许用户通过移动设备轻松理解和填写。

5。添加内联表单字段标签内联字段标签和文本，让访问者非常容易理解他们应该在表单中放置回复的位置。他们消除了对哪个标签属于哪个领域的猜测，使访客能够毫不犹豫地浏览表格。它们还能让你的身体看起来干净、简约、整洁、光滑。

是一个很好的例子：

源

由于这些字段标签是内联的，因此表单看起来很简单，比标签位于输入字段之外时更短。访客在确定他们需要在哪里输入信息时没有问题。有时，当字段标签位于字段的上方、下方或侧面时，很难确定哪个标签属于哪个字段。

6。使用内联错误消息在web表单中使用内联错误消息是一种有效的方法，可以确保某人了解他们尝试填写的字段存在问题。它们还将访问者引导到错误的确切位置，这样就不会浪费时间确定问题所在。

创建内联消息后，请确保添加一些上下文，说明错误存在的原因以及访问者如何更正错误。这不仅可以节省访问者在修复错误时的时间，还可以避免您和您的同事在表单提交后不得不处理无效的回复。

是一个很好的例子：源代码

在这种形式下，错误消息以内联方式显示，这意味着无效字段以红色突出显示。表单在字段旁边包含一个错误符号，以进一步强调存在问题以及问题所在的位置。最后，该消息解释了错误存在的原因以及如何修复它。

返回给您

成功的web表单布局，您将为你的访客创造良好的用户体验，给他们留下积极、持久的印象。您的布局应该为访问者简化表单填写和提交流程，这样就不会对表单本身产生任何混乱或不确定性。通过思考这些实践，以及如何将它们整合到自己的表单中，以增强用户体验并提高转化率，现在就开始改进表单的布局。

最初发布于2019年1月10日上午9:00:00，更新于2021年6月10日

主题：

表单免费在线表单生成器别忘了分享这篇帖子