你将会学到 #
了解如何根据 Klaviyo 的最佳实践来设计移动注册表单，以便确保您的弹出式表单和浮出式表单针对移动访问者进行了优化。在线购物者越来越多地使用移动设备来发现新商店、浏览产品和进行购买，因此确保您的网站在移动设备上的外观与在台式机上一样好比以往任何时候都更加重要，其中包括您的注册表单。 ## 开始之前
在 Klaviyo 中，您可以创建在所有设备上显示的表单（这意味着它们在桌面和移动设备上可见），也可以创建仅在移动设备上显示的仅限移动设备的表单。如果您的表单设置为在所有设备上显示，Klaviyo 会自动优化一些元素，例如字体大小和图像，以改善移动设备上购物者的外观；不过，本指南将涵盖需要记住的其他最佳实践。在构建表单时，使用表单生成器右上角的视图选择器在桌面视图和移动视图之间切换。桌面图标将显示桌面购物者的表单外观，而移动图标将显示移动购物者看到的内容。本指南将介绍创建移动设备上显示的弹出窗口和浮出表单的最佳实践。无论您的表单是在所有设备上显示还是仅在移动设备上显示，这些都会很有帮助。有关移动设备上的注册表单的更深入概述，请前往基础知识：移动表单设计。 ## 一般表单最佳实践
桌面表单的许多最佳实践也适用于移动设备：
- 保持简洁明了：如果您有很多字段，请考虑使用多步表单。 – 如果您的表单收集短信同意，请在第一步收集电子邮件，然后在第二步通过 智能选择加入 收集电子邮件，以便移动设备上的访问者可以以最简单的方法进行订阅。 – 确保易于关闭，这样访问者就不会感到沮丧并离开您的网站。 – 使用表单预告 使购物者能够根据需要关闭和重新打开表单。 – 如果您的表单设置为在所有设备上显示（意味着桌面和移动购物者都会看到它）并包含侧面图像，则保留侧面图像仅在*移动*上显示。 
- 对每个输入字段（例如，电子邮件地址、电话号码等）使用简洁的标签，使其占一行，以便购物者可以轻松查看您要求的信息。 ### SEO 和移动表单
考虑移动 SEO 最佳实践非常重要，特别是在主页或其他登陆页面上创建表单时。常见有机搜索登陆页面上显示的表单不应掩盖网站的内容或破坏访问者的体验；否则，该页面可能会受到搜索算法的惩罚。 详细了解侵入式插页式广告和 SEO。为了避免这种情况：
- 在*目标和行为选项卡中，将表单的计时设置为基于规则，然后设置较长的时间延迟（例如当访问者退出页面时）。 – 添加一个teaser，显示在显示表单之前*。 ## 优化弹窗
弹出表单出现在购物者屏幕的中间，通常会覆盖页面的大部分内容，并妨碍他们在表单打开时与页面其他元素进行交互。这使得弹出窗口更具破坏性，但转化率也更高。要优化弹出窗口在移动设备上的运行方式：
- 当移动购物者在表单区域外单击时，禁止表单关闭，以减少表单意外关闭。 – 导航至*目标和行为。 – 向下滚动到设备。 – 在 单击外部表单关闭 下，禁用 移动* 开关。！示例表单的设备部分中的单击外部表单关闭菜单显示在桌面上已打开，在移动设备上已关闭。
- 确保表单的关闭图标（X 按钮）足够大，即使在移动设备等小屏幕上也是如此。 – 单击表单预览中的关闭图标以调整其大小。 – 测试表单在您自己的移动设备上的外观，以确保易于查找和点击。例如，左侧表单中的关闭图标可能很难在移动设备上单击。但是，右侧表单中的关闭图标更大且易于找到。！两个并排的示例表单，右侧图像中的关闭图标稍大。
- 使用覆盖颜色、阴影或两者，在视觉上将弹出窗口与网站的其余部分分开。 – 导航到*样式选项卡。 – 在 表单背景 部分中，设置 覆盖颜色 以使用半不透明覆盖将焦点吸引到表单上，并在表单打开时使网站内容变暗。 – 配置投影以在表单周围提供微妙的阴影，以将其与周围的内容分开。 4. 调整表单的边距，使其看起来更像移动设备上的弹出表单，而不是边到边运行。 1. 在 样式 选项卡中，向下滚动 表单样式。*
- 根据预览中的外观增加左/右边距。这些设置将反映在表单的桌面版本和移动版本中。 ## 优化弹出窗口
当出现弹出表单时，移动访问者仍然可以与表单后面的网站进行交互，除非打开了移动覆盖。他们可以选择关闭表单、填写表单或在继续浏览时将其保持打开状态。一般来说，这使得弹出窗口比弹出窗口的侵入性更小。要针对移动设备优化弹出表单：
- 将表单设置为从屏幕顶部或底部飞出。 – 导航到样式部分。 – 选择*移动弹出位置，然后选择停靠到底部或停靠到顶部*。选择此设置后，您的表单将从屏幕的顶部或底部飞出，并从边缘到边缘覆盖屏幕的一部分。！示例弹出表单的“样式”选项卡中的移动弹出位置设置为“停靠到底部”。
- 使用移动覆盖、投影或两者在视觉上将弹出表单与网站的其余部分分开。 – 导航到*样式选项卡。 – 滚动到表单背景设置。 – 打开移动覆盖，以便移动购物者在填写或关闭表单之前无法单击您网站上的任何其他元素。请注意，在桌面上查看弹出表单时，移动覆盖不会出现。 – 打开投影，在表单周围提供微妙的阴影，将其与周围的内容分开。请注意，投影*设置会影响表单的移动版本和桌面版本。 !表单编辑器中“样式”选项卡的“表单背景”部分显示移动覆盖和投影已打开并配置了示例颜色。
后续步骤 #
针对移动设备优化表单后，请尝试A/B 测试您的表单设计，以更好地了解网站访问者的偏好。 ## 其他资源
