你将会学到 #
了解如何使用 Klaviyo 的注册表单生成器通过编辑 样式 部分中可用的设计设置来设计表单。样式设置适用于整个注册表单，包括表单的所有步骤及其成功消息。保持注册表单的设计简单。它应该清晰、整洁，并且有 1 个主要目的。此外，您还需要使其易于阅读和遵循。 ## 开始之前
在设置注册表单样式之前，请导航至*注册表单选项卡 > 创建注册表单。* 您可以从表单库自定义预构建的模板，或创建全新的注册表单模板。在样式设置之前添加您想要包含的任何内容和输入块。如果您要构建仅限移动设备的注册表单，请参阅基础知识：移动表单设计。
表单类型 #
在 样式 部分的顶部，您可以选择表单类型：弹出、全页、浮出或嵌入：
- *弹出窗口出现在浏览器窗口的中间。弹出窗口很引人注目，最适合用于重要优惠或关键消息传递。弹出窗口在所有表单类型中具有最高的转化率。 – 弹出按钮 从您选择的任何方向滑入浏览器窗口。这些，如弹出窗口，可用于让某人完成某事或重定向他们，但由于这是一个侵入性较小的选项，因此您可以使用它以被动方式收集有关浏览器的信息。 – 嵌入式表单出现在您将提供的代码片段粘贴到您的网站上的位置。嵌入式表单是侵入性最小的注册表单，通常在网站的页脚中用于收集电子邮件地址。 – 全页 表单显示在整个浏览器窗口上，吸引购物者的全部注意力。这些是高转换表单，因为它们不容易被忽视，但这也使它们更具侵入性，因为购物者必须与表单交互才能关闭它。 – 考虑使用整页表单作为登陆页面 来扩大您的订阅者列表。 – 横幅显示为网页顶部或底部的栏。它们比弹出窗口或整页表单的侵入性要小，提供持续的可见性和适合移动设备的设计，可与您的网站顺利集成。您可以将横幅设置为随页面滚动或保持固定，将内容块或输入字段直接添加到横幅，或者配置横幅，以便当有人单击它时，它会触发与您的帐户不同的表单打开。 – 要在购物者单击横幅时触发不同的表单出现，请单击预览中的按钮并将操作设置为打开另一个表单*，然后选择要显示的实时表单。请注意，这对于嵌入表单来说是不可能的。 ## 背景图像和侧面图像
要将自定义图像添加到注册表单中，请使用侧面图像或背景图像。侧面图像显示在表单内容的左侧或右侧，而背景图像显示在表单字段的后面。在表单中使用图像时，需要记住以下几点：
- 有多种图像格式可供选择。 JPEG 可以很好地平衡彩色图像的质量和大小，而 PNG 可以保持透明图像或徽标看起来清晰。 – 侧面图像的文件大小为 50-100 KB，背景图像的文件大小为 200 KB 以下，以确保高质量的图像，而不会减慢网站的加载时间。 – 与在网络上查看的所有图像一样，较大的文件大小会导致加载时间较慢。 – 请注意，72dpi 的全角图像通常会大于 1MB，减小图像的大小可能会降低其质量。选择图像时请考虑图像质量和加载时间之间的权衡。 – 请务必使用相当高质量的图像以获得最佳效果。 – 在网络上，使用 72dpi 分辨率是最佳实践。为了平衡图像质量和加载速度，请尝试将图像的宽度保持在 600 到 1000 像素之间，全角图像的高度保持在 2000 像素以下。小于电子邮件全宽的图像可以小于 600 像素。 – 请注意，如果您使用整页注册表单，则需要更大的高分辨率图像（例如，最小宽度为 1980 像素）以适合较大尺寸的表单。请记住，这仍然会影响加载时间。 – 将替代文本添加到您的图像中，以提高与您的表单交互的所有用户的可访问性。由于注册表单是在浏览器上呈现的（与在 ESP 上呈现的电子邮件不同），因此有关如何格式化和调整它们的建议较少。浏览器可以渲染所有类型和大小的图像，因此一般来说，坚持使用高分辨率图像、可管理的文件大小，并测试每种类型设备上的外观。 ### 添加侧面图像
要添加侧面图像：
- 前往*样式部分并滚动到侧面图像设置。 2. 选择左图像或右图像*，具体取决于您希望图像出现的位置。 !表单编辑器“样式”选项卡中的“侧面图像”选项，您可以在其中选择无图像、左图像或右图像。
- 选择图像。默认情况下，带有侧面图像的表单设置为 780px 宽和中等尺寸；但是，可以在“样式”选项卡的“侧面图像”部分中进行调整，具体取决于表单大小或者您是否希望图像显示得更小或更大。请注意，侧面图像是在步骤级别设置的，因此您可以为表单的每个步骤设置单独的图像。有关侧面图像显示选项的更多信息，请参阅我们的文章如何在注册表单中添加侧面图像。 ### 添加背景图片
要添加背景图像：
- 在表单背景下切换背景图像设置。
- 使用*浏览*按钮上传您的图像。 3. 根据您的喜好调整显示设置。 !“样式”选项卡中的“表单背景”菜单，打开背景图像并选择示例图像。
如果您向表单添加侧面或背景图像，请通过选择顶部菜单栏中的每个步骤来预览所有表单步骤，包括成功消息。默认情况下，表单的高度根据每个步骤上的内容和表单字段进行调整，因此某些步骤可能比其他步骤更高或更短。当您的表单包含图像时，可以按较小的步骤截断某些图像内容。为了避免这种情况，请在 样式 部分的 表单类型 下设置最小高度。 ## 颜色和间距选项
使用 表单样式 和 输入字段样式 设置来设置颜色、边框颜色、填充和边距。这些设置将应用于表单的所有步骤，除非您在特定内容块的样式设置中应用冲突的设置（例如，文本或颜色）。 !表单编辑器的“样式”选项卡中示例表单的“表单样式”和“输入字段样式”部分。
字体和文本样式 #
在输入字段文本样式下编辑内容块（例如电子邮件或电话号码字段）的文本（例如字体、大小、颜色等）。 !表单编辑器中示例表单的“样式”选项卡的“输入字段文本样式”部分。
通过单击表单预览中的块并使用出现的 文本 选项菜单来编辑特定内容块的文本。 Klaviyo 的表单编辑器使用 UTF-8 编码标准，这意味着它支持拉丁字符、表情符号、双字节字符等。 !当您在表单编辑器中的表单预览中选择任何文本时显示的文本菜单。
您的注册表单可以使用 Klaviyo 编辑器原生的网络安全字体，这是我们的 Klaviyo 托管的自定义字体 之一，或者您也可以添加自己的自定义字体。了解如何在注册表单中使用自定义字体。 ## 关闭图标
您可以调整表单关闭图标（右上角的 X）的大小、颜色和样式。单击表单编辑器中的 X 图标，然后在左侧编辑器中调整设置。详细了解设计表单的关闭图标样式。 !在表单编辑器中的注册表单上选择的关闭图标以及显示的相应关闭图标菜单。
如果您选择使用整页表单，则购物者关闭该表单的唯一方法是单击关闭图标。这有助于吸引他们的注意力；但是，请确保关闭图标清晰可见，这样购物者就不会因整页表单的中断而感到沮丧。 ## 自定义 HTML 和 CSS
Klaviyo 的注册表单编辑器当前不支持自定义 HTML 或 CSS 内容。有关使用 Klaviyo 编辑器自定义表单的提示和灵感，请前往社区论坛。 ## 结果
您现在已经了解了如何在表单编辑器中调整各种样式设置来设计注册表单。 !已发布并出现在网站上的示例弹出表单。
后续步骤 #
设计好注册表单的样式后，请了解如何设置表单的行为，包括哪些访问者应该看到表单以及表单应该出现的时间。请参阅我们的文章如何选择表单定位和行为设置。发布注册表单后，如果您的列表启用了双重选择加入，请自定义您的选择加入确认电子邮件。然后，构建欢迎系列 提供表单的优惠（例如，首次订单的折扣或免费送货）并向新订阅者介绍您的品牌。
