联系表格是许多网站的重要组成部分。 尽管它们通常很简单，但是如果您要收集销售线索并与用户保持联系，则需要确保它们易于使用。 通常这不是办公室流量的问题，但是如果您使用的是移动设备，则使用表格可能会很困难。
在本教程中，我们将讨论设计移动友好表单的重要性。 接下来，我们将向您介绍五个技巧，以确保您的表单在移动设备上的正常运行。
我们开始工作吧！
为什么表单对于移动设备非常重要
表格有各种形状和大小。 大多数情况下，您将处理联系表：
注册（订阅）表单也很受欢迎，因为它们使您可以收集电子邮件并将其定位为广告系列：
但是，表格可以用于各种其他目的。 例如，您可以使用 在线调查或问卷调查 ，在这种情况下，您将需要允许用户输入回复的表格。
换句话说，表单用途广泛，几乎所有站点都以一种或另一种方式使用表单。 因此，简单易用的表单至关重要（除非您想为访问者提供令人沮丧的体验）。
使用台式机或便携式计算机上的表格通常非常容易。 您拥有完整的鼠标和键盘，因此选择要使用的字段并输入数据应该不是问题。 但是，从智能手机或其他紧凑型设备浏览网页会带来麻烦。
当在小屏幕上用手指操作时，由于糟糕的设计决策，有时与表单的交互可能会让人不知所措。 您应该在自己的设计中避免这种情况。 毕竟，如果移动用户无法与您的表单进行交互，则您可能会失去转化，潜在客户或仅使访客烦恼。
同样重要的是要了解，移动流量现在比桌面资源重要得多。 实际上，近年来，移动流量已经超过了后者。 这意味着在开始新项目时，设计移动友好的网站应该是您的主要目标。
5用于设计易于使用的移动表单的提示
幸运的是，设计适合移动设备的表格并不像您想象的那样困难。 在大多数情况下，您只需要牢记一些基本知识，并在使用表单之前对其进行彻底的测试。 让我们来谈谈如何做！
1。 删除所有不必要的部分
表单包含的字段越多，在移动设备上使用的难度就越大。 确实，在移动设备上使用表格只是更加复杂。 通过减少表单中包含的字段或部分的数量，可以最大程度地增加访问者填写表单的机会。
这是一个简单的例子 联系表 有一些在移动设备上不需要的附加字段：
在大多数情况下，一个伟大的 联系表 是姓名、电子邮件和您要接收的消息的正文。 其他一切都取决于您使用的网站类型以及您是否正在尝试收集潜在客户。
最终，表单所包含的字段越少，移动访问者越容易使用它们。 毕竟，无论设计得多么好，使用触摸屏选择字段都可能很棘手，以最大程度地减少用户必须跳的跳数。
您目前的目标是查看网站上的现有表单。 仔细阅读他们的每个部分，确定您是否真的需要除前面提到的字段以外的其他任何字段。 如果有多余的字段，则将其删除。
2。 如果可能，请使用下拉列表
我们大多数人都习惯在移动设备上打字和使用触摸屏。 然而，给朋友发短信并填写一份 联系表 是两种截然不同的经历。 有了这些，如果您必须输入大量信息，您很可能会感到沮丧。
让您的移动访问者生活更轻松的一种方法是简化他们必须对您网站的元素做出的选择。 为了让您了解我们在说什么，让我们利用我们之前的示例 预订 餐厅：
做一个 预订，您可能需要留下姓名、电子邮件、电话 et 注明时间以及在场人数。 您可以通过两种方式创建表单字段来验证一天中的时间。 预订:
- 配置一个仅接受数字输入的字段。
- 设计一个包括所有可用时间的下拉列表。
可以想象，后者对移动用户更友好。 使用这种方法，他们不需要输入数字，他们只需从您包括的选项中选择最适合他们的数字即可。
您可以查看表单并查看它们是否包含可以用下拉菜单替换的字段的想法。 并非总是如此，因为您不能使用下拉菜单收集姓名或电子邮件，但可以使用其他选项。
无论使用哪种情况，您都需要确保下拉菜单包含易于从移动设备中选择的选项。 换句话说，将菜单设置得足够大，以至于无需别人啄食就可以选择正确的选项。
3。 确保您的提交按钮易于触摸
这个技巧很简单，但仍有待提及。 您设计的每个表单都应包括一种供用户确认他们要提交输入数据的方法。 在大多数情况下，这意味着创建一个提交按钮：
使用常规计算机时，单击提交按钮是世界上最自然的事情。 但是，我们在移动设备上遇到了几种形式，很难按一个按钮。
如果您的访客无法提交他们在您的表格中输入的信息，您的所有工作都将被浪费。 此外，没有什么比按钮更专业 发送 不能按预期工作。
要为移动设计更好的提交按钮，需要考虑以下三个提示：
- 确保它们足够大，以便您可以轻松点击移动设备。
- 不要将按钮靠近其他项目放置，以免用户不能正确触摸它们。
- 突出显示您的按钮，例如使用对比色或创意字体。
最重要的是，您还需要在网站上线之前测试按钮。 我们将在一分钟内更深入地介绍如何执行此操作。 现在，让我们谈谈性能。
4。 确保您的表单快速加载
我们在许多文章中都谈到了网站的性能，但这并不是因为我们需要速度。 关键是，大多数人不喜欢缓慢的网站，这是很合理的。
随着互联网速度的加快，可能很难等待网站加载时间过长。 此外，移动互联网的速度变化往往比常规的家庭连接大得多。 这意味着如果您想让这些用户满意，就需要针对移动设备高度优化您的网站，因为并非所有用户都可以访问互联网（即快速）。
这个特别的提示可以应用于您的整个网站，但对于显示表单的移动页面也很重要。 如果您网站的这些部分加载时间过长， VOUS 失去转换 以及与访客建立联系的机会。
通常，网站加载时间不超过两秒钟。 一旦超过此限制，跳出率往往会急剧上升，这对您来说是一个可怕的消息，并且鉴于移动浏览的性质，最好将时间保持在尽可能低的水平。 。
考虑到这一点，有很多方法可以提高网站的整体性能。 例如，您可以升级到更好的计划住宿，使用针对速度进行优化的响应式主题 压缩你的图像。 当然，这些将帮助所有用户，但是对于使用较小设备的用户特别有用。
5。 在发布之前测试您的表单
考虑到表单是大多数网站的关键部分，因此在发布表单之前先对其进行全面测试是有意义的。 使用WordPress，此过程非常简单。 您可以继续设计特定的页面来显示表单，直到完全测试它们之后才发布它们。
当然，要使用哪种插件或主题都取决于您（只要它可以帮助开发移动网站）。 但是，在测试阶段，我们建议您保持简单并使用诸如 工具 发展 铬 做这项工作。
让我们来看一个简单的例子。 如果您使用的是Chrome，请继续并使用要测试的表单预览页面。 然后右键单击此页面上的任意位置，然后选择选项 检查 。 Chrome会在左侧和右侧显示一组工具，可用于查看和编辑页面的源代码，您可以从移动设备上预览其外观：
在屏幕顶部，您可以使用菜单在不同分辨率之间切换。 Chrome包含几种流行的移动设备的设置，但您也可以输入自定义分辨率。
此时，您应该在多个设备上检查联系表单的外观和行为。 以下面的示例为例-表单可以正常工作，但是您可以看到它不适合它。 特别要注意与屏幕边缘距离太近的文本和图标：
预防此问题的一种方法是使表单保持简单，如我们在第一篇技巧中提到的。 在下面的示例中，该表单使用多个下拉列表，并且仅需要三个字段。 这使它易于使用，更重要的是，其形式是如此简单，以至于必须完美适合所有设备：
如果您的任何表格有任何问题，显然您需要立即解决。 否则，您可能会疏远您的移动受众群体，我们会尽力避免这种情况！
结论
确保您的网站与移动设备兼容是保持流量和不挫败访问者的关键。 具体来说，如果您不想错过接收消息或收集有价值的潜在客户的信息，则表格应易于在移动设备上使用。
在设计适合移动设备的表单时，这里有五个简化生活的技巧：
- 删除所有不必要的部分
- 如果可能，请使用下拉列表。
- 确保您的提交按钮易于按下。
- 确保您的表单快速加载。
- 在发布表单之前测试表单。
