如何在您的网站上嵌入注册表单

你将会学到

了解如何将嵌入注册表单添加到您网站的特定页面或位置（例如页脚），以便希望了解您品牌更多信息的购物者可以轻松注册。在网站页脚中嵌入注册表单以与其他已发布的表单配合使用是 Klaviyo 优化列表增长的最佳实践。要将嵌入表单添加到您的网站，您需要：

1. 在 Klaviyo 中创建并自定义新的嵌入表单。
2. 从发布模式复制表单的嵌入代码。
3. 将嵌入代码粘贴到您网站的文件中。由于粘贴表单代码需要访问您网站的 HTML 和电子商务平台，因此我们的支持团队无法提供实际帮助。如果您的团队中没有开发人员，请考虑联系 Klaviyo 合作伙伴 寻求帮助。

开始之前

在创建注册表单之前，请确保您的 Klaviyo 帐户中已启用注册表单功能。这可以确保在 Klaviyo 中发布的表单在您的网站上正确显示并同步所有必要的数据。为了使嵌入表单正常工作，您需要：

• 启用注册表单功能。这通常也称为“现场跟踪”安装。 – 将嵌入代码粘贴到您的网站上您希望表单显示的任何位置。请注意，粘贴嵌入代码对于嵌入表单来说是唯一的。弹出、浮出和全页表单不需要粘贴任何代码，并且可以直接从 Klaviyo 的表单生成器发布

2024 年 12 月 6 日生效：Klaviyo 改进了嵌入表单的观看次数计算方式，以更准确地衡量参与度。现在，仅当表单在用户视口中可见时才会记录嵌入表单的视图。此更改可能会导致浏览次数发生显着变化并提高提交率，特别是对于嵌入网站页脚的表单，因为只有当访问者向下滚动足够长的时间以使表单部分进入其视口时，这些内容才会被计数。

将嵌入表单添加到您的网站

如果您使用的是 Shopify、BigCommerce 或 WooCommerce，通过平台嵌入表单注册的订阅者将通过集成自动添加到您的 Klaviyo 列表中。因此，您无需将集成的嵌入表单替换为 Klaviyo 中的嵌入表单，但如果您希望订阅者收集到不同的列表，您仍然可以在 Klaviyo 中创建一个嵌入表单。

在 Klaviyo 中创建并自定义新的嵌入表单

1. 从 Klaviyo 的左侧导航中选择注册表单选项卡。
2. 选择创建表单。从这里，您可以：

• 从表单库中自定义预构建的模板。单击“所有类型”旁边的下拉列表，然后选择“嵌入”以过滤表单库以显示所有预构建的嵌入表单模板。 – 通过选择右上角的创建新表单，从空白嵌入表单模板开始。 3. 在出现的创建模式上：
• 为您的表格命名。 – 选择新订阅者将加入哪个列表。 – 确认 嵌入 作为您的表单类型。

4. 单击保存并设计。
5. 使用编辑器设置表单样式并添加任何所需的块或输入字段。有关自定义表单时的指导，请参阅注册表单入门。如果您打算将表单嵌入到网站的页脚中，我们建议您仅询问电子邮件地址以提高选择加入的数量。
6. 当您对表单感到满意时，单击发布。请注意，该表单目前还不会出现在您的网站上；您还必须将嵌入代码粘贴到您的网站上才能使其生效。
7. 在出现的 已成功发布 模式中，单击 复制 将嵌入代码复制到剪贴板。这是您需要在本文下一部分中粘贴到站点文件中的代码。

请注意，表单的嵌入代码也可以在表单编辑器的定位和行为选项卡中找到。

将嵌入代码粘贴到您的网站上

在 Klaviyo 中发布表单并复制嵌入代码后，您需要将此代码粘贴到您的网站文件中才能显示表单。粘贴代码的位置取决于您希望表单出现的位置（例如，在主题文件或特定页面文件中），并且可能因集成而异。在下面的列表中找到您使用的平台，然后前往其下方链接的文章，获取有关粘贴该集成的嵌入代码的更具体指南。如果您没有看到您的平台，请参阅“其他”要点。 – 大商务 对于 BigCommerce，将嵌入代码粘贴到您希望其显示的网站文件中。 – 前往将嵌入代码添加到您的 Bigcommerce 网站。 – 购物 对于 Shopify，将 Klaviyo 嵌入式表单应用添加到您的页面模板并粘贴表单的嵌入代码。 – 前往将嵌入代码添加到您的 Shopify 网站。 – 方形 对于 Square，将嵌入代码粘贴到您希望其显示的网站文件中。 – 前往将嵌入代码添加到您的 Square 网站。 – WooCommerce 对于 WooCommerce，将嵌入代码粘贴到您网站的 HTML 中。 – 前往 将嵌入代码添加到您的 WooCommerce 网站页脚。

• 其他平台

如果您的平台未在上面列出，或者您使用的自定义集成本身并未与 Klaviyo 集成，则您需要确保将 2 个代码片段粘贴到您的网站上，以便嵌入表单正常工作：

• 现场跟踪（也称为 Klaviyo.js）以启用注册表单功能。 – 请注意，当您集成时，许多平台会自动向您的网站添加现场跟踪（包括 Wix、Prestashop、Magento 1 和 2 等）。检查 Klaviyo 中平台的集成设置，以确认已选择此选项。 – 如果您的平台没有原生 Klaviyo 集成，则必须手动添加现场跟踪。
• 特定表格的嵌入代码
• 启用现场跟踪后，您必须将表单的嵌入代码粘贴到网站的 HTML/源代码中您希望其出现的任何位置（例如页脚）。 – 表单的嵌入代码可以从表单编辑器内的定位和行为选项卡复制。请务必保存对您的网站所做的任何更改。如果您不习惯在网站上编辑代码，请考虑联系 Klaviyo 合作伙伴 寻求帮助。

后续步骤

在 Klaviyo 中发布嵌入表单、将嵌入代码粘贴到您的网站并保存更改后，请前往您的网站并刷新页面。无论您在何处粘贴嵌入代码，嵌入表单都应该出现在您的网站上。

嵌入表单故障排除

如果您的嵌入表单已在 Klaviyo 中使用，但未显示在您的网站上，请参阅以下故障排除提示：

• 刷新浏览器缓存。 – 验证您的网站是否已正确与 Klaviyo 集成，并且您的网站也已上线。 – 确认您已为您的帐户启用注册表单（这与启用现场跟踪相同）。 – 确保您在粘贴嵌入代码后保存了网站上的更改。 – 在 Klaviyo 的注册表单编辑器中，导航至目标和行为部分并查看以下内容：
• 在显示部分中，验证：
• 粘贴在您网站上的嵌入代码与 Klaviyo 提供的代码正确匹配
• Klaviyo 中的设备设置与您用于查看表单的设备相对应
• 在 Targeting 部分中，验证：
• 您符合任何缩小的访客设置
• 表单设置为显示在您正在查看的 URL 上，并包含任何指定的 UTM 参数
• 您的位置适合表格的任何地理定位集
• 您的购物车满足为表单配置的任何购物车内容要求
• 在新的隐身（“私人”）浏览器窗口上重新运行测试。 – 确认只有 1 个 Klaviyo 帐户与您的网站集成。 了解有关集成的更多信息。

表单未出现的其他潜在原因

• 如果您的网站上存在自定义 CSS，这可能会与 Klaviyo 的现场跟踪代码段（“Klaviyo.js”）冲突并干扰您的表单。让您的开发人员使用浏览器的开发人员工具检查网站的代码并找出问题或联系支持人员。 – 如果您使用的是单页应用程序（“SPA”）站点，您的设置可能会导致表单间歇性显示。请咨询您的开发人员以获取帮助。

其他资源

• 如何联系支持人员
• 注册表单疑难解答
• 注册表单入门