单栏表格：示例和灵感

您是否希望简化表单，以便用户更有可能完成并提交表单？单栏表格可能就是您正在寻找的设计。

如果您需要一些例子和灵感，我可以满足您的需求。在这篇文章中，我将分享我们的团队在使用拖放表单生成器构建数百个表单后精心策划的创建单列表单的想法和设计技巧。

让我们开始吧！

单栏表格：示例和灵感

快速浏览单列表单

单栏表单是指将字段一个接一个地排列在一条垂直线上的表单。每个表单字段跨越表单容器的整个宽度，因此用户从表单顶部移动到底部时可以一次关注一个字段。

以下是单列表单的一些关键特征：

• 线性流：字段以简单的线性顺序组织，使用户可以轻松地遵循并完成表单而不会造成混乱。
• 简单性：单列布局消除了多列带来的复杂性，使表单对用户来说不那么令人畏惧。
• 移动设备友好性：单列表单自然适应各种屏幕尺寸，尤其是移动设备，因为它们需要较少的水平空间。这种响应能力保证了所有设备上不间断的用户体验。
• 焦点和清晰度：每个字段都跨越表单的整个宽度，用户可以轻松地一次专注于一项任务。这减少了出错的机会并提高了完成率。
• 易于扫描：垂直对齐方式允许用户快速扫描表单，这对于较短的表单（例如联系表单或注册表单）特别有利。
• 更好的可用性：简单的布局是用户友好的 - 易于理解和完成 - 这可以带来更高的提交率。

这些特性使单栏表单成为多种表单的理想选择，尤其是那些简单性和易用性是首要考虑的表单。

立即创建您的单栏表格

何时使用单栏表格

对于小型企业主来说，单栏表单很受欢迎，因为它们易于设计和实施，即使没有先进的技术技能。这些形式提供了跨不同平台的一致性，具有成本效益，并且用途广泛，足以用于各种目的。因此，它们是小型企业的实用选择。

但是，它总是适合您的形式的最佳设计选择吗？在确定是否使用单列布局时，请考虑以下因素：

• 表单长度：对于较短的表单或字段数量有限时，使用单列布局，因为它使表单简单且易于完成。
• 移动用户：如果您的受众主要通过移动设备访问您的网站，请选择单列布局，因为这些表单可确保在所有屏幕尺寸上提供响应式用户体验。
• 辅助功能需求：如果辅助功能是优先考虑的事项，那么单栏表单通常更容易为残障用户导航。因此，它们是促进包容性的更好选择。

你可知道？免费提供给 WPForms Lite 订阅者的所有表单模板都是单栏表单。

单列表单设计技巧

单列表单的主要目的之一是提供用户可以轻松填写​​的简单设计。

当表单易于理解和填写时，用户更有可能提交信息，从而提高转化率。添加清晰的标签、逻辑字段顺序和最少的必填字段，以减少用户的挫败感并增强整体体验，这也鼓励重复交互。

使用 WP 表单

我在这里分享的所有示例和灵感都是使用 WPForms 创建的，我们提供非常有用的工具和功能来帮助您为您的网站构建最佳的单栏表单。

我们不仅提供数百个专为您立即开始使用而设计的单列表单模板，而且我们还鼓励您利用我们的拖放表单生成器来创建您自己的单列表单。

通过“布局”字段中提供的单列选项，您可以快速将整个表单组织到单个列中，或者使用此字段保持某些部分线性，同时将其他部分组织到多个列中。

也就是说，您还可以通过不使用“布局”字段以线性方式组织表单字段 - 当您将它们拖放到表单上时，这些字段将自动进入单个列。

您可能只想调整那些不跨越表单宽度的字段大小。将字段大小设置为大即可！

你可知道？启用 WPForms Lead Forms 插件后，这些表单上使用的字段会自动格式化以跨越屏幕的统一宽度。

减少表单字段

一般来说，最好删除表单上任何不必要的字段和信息。单列表单也是如此。力求简单是这些表单的目的之一，因此请考虑减少字段数量（仅在可以的情况下）以增强用户体验。

不知道要保留哪些字段以及要删除哪些字段？请记住以下提示：

• 优先考虑基本信息：重点关注实现表单目的绝对必要的字段，并删除任何对您的目标没有直接贡献的字段。
• 使用条件逻辑：使用条件逻辑仅在相关时显示某些字段，隐藏不必要的字段，除非满足特定条件。
• 合并相关字段：如果可能，将相关字段合并到单个输入中以减少字段总数。
• 考虑用户的努力：删除任何需要用户提供可以通过其他方式轻松获取的信息的字段，例如使用位置数据或根据用户输入自动填充。
• 稍后索取信息：如果某些信息不是立即需要的，请考虑在稍后阶段或在初次提交后索取，而不是挤在最初的表格中。

针对移动设备进行优化

我在这篇博文中多次提到了移动响应能力的重要性，您可能已经厌倦了听到它，但这是事实！由于有如此多的网站用户通过移动设备访问网站，因此针对这些屏幕优化表单至关重要。

幸运的是，单列表单自然适合移动设备。因此，如果您的网站上有一个表单，或者喜欢我们提供的模板，但它使用多列，只需跳到拖放表单生成器即可将表单编辑为一列。

然后，在 WordPress 页面上发布表单之前，选择移动预览选项以查看表单在小型设备上的外观。

实际上，在发布之前使用移动视图预览任何表单可能是一个很好的经验法则。您可能会发现多列表单可能更适合单列格式。

编写清晰的字段标签和描述

在每个表单字段的设置中，您可以自定义标签和说明，以及用于包含说明文本的其他选项。

重要的是，这些标签和说明能够引导用户顺利地完成表单，而不会在视觉上使表单字段变得混乱。

为了帮助用户避免混淆并减少错误，您可以考虑向表单字段添加占位符文本。这通过提供说明性文本或显示预期输入的示例，为访问者提供如何填写表单的指导。

有效的单栏表格示例

现在您对单列表单的功能和用途有了更好的了解，让我们看一下其中一些表单的实际应用。

联系表格

单列联系表格简短而甜蜜。它们不需要很多字段即可运行，并且以视觉上吸引人的方式进行组织。

在上面的联系表单中，首先使用“内容”字段来包含表单用户的说明。名称字段已简化为一行，表单上的每个字段都位于布局字段的单列中。

不要忘记我们的模板库提供了许多联系表单模板，就像这个一样！

时事通讯注册表

时事通讯注册是另一种类型的表单，通常不包含很多字段，并且相当简单。新闻通讯注册表单所需的只是“姓名”和“电子邮件”字段。

在我的时事通讯注册示例中，我按原样保留了“姓名”字段，这将该字段分为名字和姓氏（而不是像上面的联系表单中那样的简单版本）。因此，对于移动用户来说，这两个文本框将彼此堆叠。

也就是说，这仍然是单列，因为我根本没有在此表单中使用“布局”字段。不过，正如我之前在设计技巧中提到的，我确实将字段大小调整为“大”。

订单表格

这是宠物用品订单的示例。虽然每个产品选择字段都显示一个数量选项，但此表单也是单列设计。

这种线性流程对用户来说是用户友好的，因此他们更有可能提交表单。当该表单是订单表单时，这意味着您的网站访问者从购物者转变为客户！

订单专业提示：按照与用户思维过程一致的自然顺序排列字段，例如在产品选择后添加联系信息，然后是运输详细信息，然后是付款信息。

反馈表

如果反馈表单包含评级字段、调查、民意调查或其他可能很容易挤满多列的交互功能，则反馈表单应采用单列设计。

在此反馈表单示例中，我还采用了条件逻辑来防止该单列运行时间过长。

如果用户选择堂食选项，他们将根据该体验填写一份调查。如果他们选择交付，则会出现不同的问题。

潜在客户生成表格

潜在客户表单一次前进一屏，一次只有一个或几个字段。这些是单列表单的独特示例，但我将其包含在此处是因为表单必须以这种方式组织才能启用潜在客户表单功能。

正如您在上面看到的，地址字段的一些元素被分成并排的部分，但表单的整体布局是单列。

预约表格

将预约表单组织在单列中是个好主意，因为许多表单用户希望通过移动设备安排预约。

上面的表单示例使用单列，因此在手机上看起来不错。

而且，虽然日期和时间字段可以包含在带有并排框的单个字段中（这将自动适应移动屏幕），但我在这里将它们分为两个字段。类似地，优选的通信方法选项可以内联组织或组织到移动响应的列中，但在本示例中将它们保留在一列中。

登录表格

用户登录网站的页面上的表单是另一种类型，您可以在其中看到单列设计。这些表格非常简化，因为它们实际上只需要两条信息——用户名或电子邮件和密码。

这是我们在 WPForms 中使用的上面的登录页面。不是很好吗？

这样就结束了！这些示例只是触及了使用单列表单的所有原因和方法的表面。事实上，如果需要，您在网站上发布的每个表单都可以使用单列布局。他们将保证适合移动设备，这是肯定的！

立即创建您的单栏表格

接下来，查看这些额外的布局设计技巧

单列布局只是设计表单的多种不同方法之一。使用 WPForms，定制选项几乎是无穷无尽的！但如果您正在寻找一些入门技巧，请查看我们建议的用户友好设计最佳实践。

准备好构建您的表单了吗？立即开始使用最简单的 WordPress 表单生成器插件。 WPForms Pro 包含大量免费模板，并提供 14 天退款保证。

如果本文对您有所帮助，请在 Facebook 和 Twitter 上关注我们，获取更多免费的 WordPress 教程和指南。