联系表格是许多网站的关键组成部分。尽管它们的功能通常很简单，但如果您想收集潜在客户并与用户保持联系，您仍然需要确保它们易于使用。这通常不是桌面流量的问题，但如果您使用移动设备，使用表单可能会变得棘手。

为什么您的表单对移动设备友好很重要

表单有各种形状和大小。最常见的是，您将处理联系表格：

注册表单（或选择加入）也非常受欢迎，因为它们使您能够在活动期间收集电子邮件并定位它们：

但是，表单可用于各种其他目的。例如，您可能希望使用在线投票或测验来收集信息，在这种情况下，您将需要用户输入响应的表单。

换句话说，表单非常通用，几乎每个站点都以某种方式使用表单。因此，确保您的表单易于使用至关重要。

使用台式计算机或笔记本电脑中的表单通常非常简单。您有鼠标和全键盘，因此选择要使用的字段并输入数据应该不是问题。但是，从智能手机或其他小型设备浏览网页会带来一些麻烦。

当您在小屏幕上使用手指工作时，由于糟糕的设计决策，与表单交互有时会很痛苦。这是您在自己的设计中需要避免的事情。毕竟，如果移动用户无法与您的表单进行交互，您可能会失去转化、潜在客户或完全惹恼访问者。

同样重要的是要了解移动流量现在与桌面来源一样重要——如果不是更重要的话。事实上，移动流量在过去几年内已经超过后者。这意味着在启动新项目时，设计一个适合移动设备的网站应该是您的主要目标。

设计移动友好表单的 5 个技巧

1. 删除所有不必要的部分

表单包含的字段越多，在移动设备上使用就越困难。这是因为，尽管设计得很好，但在移动设备上使用表单却更加复杂。通过减少表单包含的字段或部分的数量，您可以最大限度地增加访问者填写它们的机会。

这是一个联系表单的快速示例，其中包含一些可以不使用的附加字段：

在大多数情况下，一个优秀的联系表单所需要的只是姓名、电子邮件和要接收的消息正文。其他一切都取决于您正在运行的网站类型以及您是否要收集潜在客户。

最终，您的表单包含的字段越少，移动访问者就越容易使用它们。毕竟，即使设计良好，使用触摸屏选择字段也可能很困难，因此您希望尽量减少用户必须进行的“跳转”次数。

您在此阶段的目标是查看站点的现有表单。仔细检查它们的每个部分，并考虑您是否真的需要我们前面提到的字段之外的任何其他字段。如果有多余的字段，只需将其剪掉即可。

2. 尽可能使用下拉列表

我们大多数人都习惯在移动设备上打字和使用触摸屏。然而，给朋友发短信和填写联系表格是两种截然不同的体验。

使移动访问者的生活更轻松的方法之一是简化他们需要针对您的网站元素做出的选择。为了让您了解我们在说什么，让我们以我们之前的餐厅预订示例为基础：

要进行预订，您可能需要留下姓名、电子邮件、电话， 并 注明时间以及参加人数。您可以通过两种方式创建表单域来验证预订时间：

设置一个只接受数字输入的字段。

设计一个下拉列表，包括预订的所有可用时间。

正如您想象的那样，后者对于移动用户来说更加人性化。使用这种方法，他们不需要输入数字，他们可以从您提供的选项中选择最适合他们的选项。

让您查看表单并查看它们是否包含您可以用下拉菜单替换的任何字段的想法。情况并非总是如此，因为您无法使用下拉菜单来收集姓名或电子邮件，但还有其他选项可能会起作用。

无论他们的用例是什么，您都希望确保您的下拉菜单包含易于从移动设备中选择的选项。换句话说，使菜单足够大，这样人们就不必四处寻找正确的选项。

3. 确保您的提交按钮易于触摸

这个技巧非常简单，但仍然值得一提。您设计的每个表单都需要包含一种方式，供用户确认他们想要提交他们输入的数据。在大多数情况下，这意味着创建一个提交按钮：

当您使用普通计算机时，单击提交按钮是世界上最自然的事情。但是，我们在移动设备上遇到了一些表单，其中按下按钮比应有的要困难得多。

如果您的访问者无法提交他们在表单中输入的信息，那么您的所有努力都将白费。另外，没有什么比不按预期工作的提交 按钮更不专业了 。

要为移动设备设计更好的提交按钮，您需要牢记以下三个快速提示：

确保它们足够大，以便在使用移动设备时轻松按下。

不要把你的按钮放在离其他元素太近的地方，这样用户就不会打错一个。

以某种方式突出显示您的按钮，例如使用对比色或创意排版。

除此之外，您还需要在网站上线之前彻底测试您的按钮。我们将在一分钟内更深入地了解如何做到这一点。现在，让我们谈谈性能。

4. 确保您的表单快速加载

我们在几篇文章中谈论了很多关于网站性能的问题，并不是因为我们需要速度。事实是，大多数人不喜欢缓慢的网站，这绝对有道理。

随着互联网速度越来越快，等待网站加载时间过长可能是一件苦差事。此外，移动互联网速度的变化往往比普通家庭连接大得多。这意味着如果您想让这些用户满意，您的网站将需要针对移动设备进行高度优化，因为并非所有用户都拥有合适（即快速）的互联网访问权限。

这个特别的技巧通常适用于您的整个网站，但它对于显示表单的移动页面也很重要。如果您网站的这些部分加载时间过长，您将失去潜在客户和与访问者建立联系的机会。根据经验，网站加载时间不应超过两秒钟。一旦你越过那条线，跳出率往往会急剧上升，这对你来说是个可怕的消息。

鉴于在移动设备上浏览的性质，尽可能缩短这段时间是一个福音。考虑到这一点，您可以通过多种方式提高网站的整体性能。例如，您可能会升级到更好的托管计划，使用针对速度进行了优化的响应式主题，并压缩您的图像。当然，这些将帮助所有用户，但对使用较小设备的用户尤其有益。

5. 在发布之前测试你的表单

考虑到表单是大多数网站的关键元素，因此您应该在发布之前彻底测试您的表单。使用 WordPress，这个过程非常简单。您可以继续设计特定页面来显示您的表单，并且在您完全测试它们之前不要发布它们。

当然，你想使用的插件或主题由你决定（只要它可以帮助开发移动网站）。但是，就测试阶段而言，我们建议您保持简单并使用诸如Chrome 开发工具之类的工具来完成工作。

让我们看一个简单的例子。如果您使用的是 Chrome，请继续预览包含您要测试的表单的页面。接下来，右键单击该页面上的任意位置并选择“检查”选项。Chrome 会向您展示一组工具，您可以使用这些工具在右侧和左侧查看和编辑页面的源代码，您可以预览它在移动设备上的外观：

在屏幕顶部，有一个菜单可用于在不同分辨率之间切换。Chrome 包含多种流行移动设备的设置，但您也可以输入自定义分辨率。

此时，您应该检查您的联系表单在多个设备上的外观和行为。以下面的示例为例——该表单运行良好，但您可以看到它没有按应有的比例缩放。尤其要注意太靠近屏幕边框的文本和图标：

正如我们在第一个技巧中概述的那样，防止此问题的一种方法是保持表单简单。在下面的示例中，表单使用多个下拉列表并且只需要三个字段。这使得它易于使用，更重要的是，表单非常简单，它应该可以在每个设备上完美地扩展：

如果您遇到任何表单问题，显然应该立即修复它们。否则，您可能会疏远您的移动受众，而这正是我们首先要避免的！

结论

确保您的网站适合移动设备对于保持流量和不让访问者感到沮丧至关重要。具体来说，如果您不想错过接收消息或收集有价值的潜在客户，您的表单需要在移动设备上易于使用。

在设计适合移动设备的表单时，这里有五个快速提示，可让您的生活更轻松：

删除所有不必要的部分。

尽可能使用下拉列表。

确保您的提交按钮易于按下。

确保您的表单加载速度快。

在发布之前测试您的表单。