跳转到主要内容

创建嵌入式订阅表单(Signup Form)

了解如何在 Omnisend 中创建嵌入式表单

作者:Ira

嵌入式表单会持续显示在您网站的特定页面上,使订阅者收集变得轻松无缝。通过将表单嵌入您网站的任何页面,您可以扩大您的覆盖范围,建立您的联系人名单,并将新订阅者直接添加到您的 Omnisend 受众中。

在本文中,您将学习如何将嵌入式表单添加到您的网站,以及如何使用它来提升您的电子邮件(Email)营销策略。


在您开始之前

  • 嵌入式表单是一种将您的订阅表单(Signup Form)显示为您网站一部分的方式。

  • 您必须将一小段 HTML 代码复制并添加到您的网站主题代码中。

  • 如果您的网站上已有页脚表单,您无需在 Omnisend 中创建另一个嵌入式表单。通过您的主题表单添加的联系人将自动同步到您的 Omnisend 受众。

  • 要使嵌入式表单正常工作,您必须先完成前端集成(对于 Shopify、BigCommerce 和 WooCommerce,一旦安装了 Omnisend 应用,此操作便会自动完成)。

  • Wix 不支持嵌入表单。 如果您使用 Wix,您可以创建一个弹出窗口飞入式表单。

  • 致 Shopify 用户:必须在您的主题中启用 Omnisend App Embed,嵌入式表单才能正常工作。了解更多关于 Shopify App Embed

设置过程

第 1 步。 前往Forms 然后点击创建表单

第 2 步。在 Forms Library 中,选择嵌入式 表单 → 选择其中一个 表单模板 点击使用模板

步骤 3. 您将被重定向至表单构建器,您可以在其中编辑表单并添加您想要的任何其他项目。

您可使用简单的拖放编辑器轻松自定义您的嵌入式表单。

除了收集电子邮件(Email)地址之外,您还可以使用输入和下拉字段来收集其他客户信息,例如出生日期、电话号码或自定义属性。

您还可以通过添加文本、图片、多个按钮,甚至是 Wheel of Fortune 来增强您的表单,以游戏化体验并激励订阅。

步骤 4。检查并调整您的表单设置。

在右侧菜单中,您将找到 行为主题设置 标签。

行为设置

  • 受众管理: 为提交表单的联系人分配一个标签,以便于进行细分受众(Segmentation)。您可以将现有标签添加到表单中,或直接在表单构建器中创建一个新标签。在此处阅读有关联系人标签的更多信息

    您也可以启用二次确认订阅(Double Opt-in)reCAPTCHA,以确保您的表单只收集有效的订阅者。了解有关 双重选择加入reCAPTCHA 的更多信息。

  • 提交后重定向: 选择订阅者提交表单后所到达的 URL。

  • 目标: 配置您的嵌入表单出现的位置和对象。您可以使用访客定位、页面定位、位置定位、来源定位和 UTM 定位。

主题设置

  • 表单布局:选择表单类型(弹出、飞出、嵌入或落地页)并调整宽度(最多1000px)。

  • 表单样式:自定义角半径、边框宽度、样式和颜色。

💡如果您想使用自定义颜色,请点击“我的颜色”下的 + 符号,从调色板中选择所需的颜色。

  • 按钮:样式化表单按钮以匹配您的品牌。

  • 字段:自定义输入字段,包括字体、大小、颜色等。

最后,您可以设置消息,在成功注册后以及对已经在您受众中的客户显示。

就这样! 您的表单已准备好嵌入。

注意:嵌入式表单在所有平台上均可使用,但如果您使用的是自定义平台,您需要首先完成前端集成。

嵌入代码

一旦您自定义了表单,您需要启用它以生成嵌入代码。

点击顶部菜单中的启用。您将看到选项以选择如何嵌入您的表单:

  • Shopify – 如果您的电子商务平台是Shopify,您将看到专用步骤和自动重定向,以帮助您嵌入表单。

  • 手动 – 如果您使用不同的电子商务平台(例如,WooCommerce、BigCommerce 等),您将收到一个必须添加到您商店管理面板的嵌入代码。

您还可以通过点击 行为设置 显示设置说明 选择如何嵌入您的表单 选择 Shopify手动 来找到嵌入代码。

注意: 嵌入表单并不是一种通用解决方案,因为它通常需要根据您商店的主题进行调整。有关详细的特定平台指导,请参阅下面您电子商务平台的文档:ShopifyBigCommerce,或WordPress/WooCommerce

在 Shopify 中嵌入表单

步骤 1. 在Omnisend中,点击启用 → 选择Shopify作为您的嵌入方法 → 复制表单 ID → 点击打开 Shopify 设置

您将被重定向到您的 Shopify 管理后台。

注意:如果Omnisend 嵌入式表单应用未启用,您将首先被重定向到应用嵌入以启用它。一旦启用,返回主题编辑器继续。了解更多关于 Shopify 应用嵌入的信息

步骤 2. 在 Shopify 中,找到新添加的Omnisend 嵌入式表单部分(通常在主题布局的底部) → 点击该部分 → 粘贴表单 ID

步骤 3. 拖动并移动Omnisend 嵌入式表单部分到您希望在主题布局中放置的位置。

💡 提示:尝试不同的位置,将您的表单放置在网站访客可见且吸引人的区域。

步骤 4. 点击保存在 Shopify 主题编辑器的右上角。

您的表单现在将在您的商店前台可见。

在 Shopify 中手动嵌入:

如有需要,您可以始终手动嵌入表单使用嵌入代码

  1. 在 Shopify 管理后台,转到在线商店主题编辑主题

  2. 点击添加部分 → 选择自定义液体

  3. 粘贴您的嵌入代码保存您的更改。

在 BigCommerce 中嵌入表单

以下步骤适用于所有根据 BigCommerce 标准构建的主题。如果您的主题已导入但未在 BigCommerce 中构建,您必须与您的主题开发人员联系以了解如何嵌入代码。

步骤 1. 在 Omnisend 中,点击启用 → 选择手动 → 复制表单嵌入代码。

步骤 2. 导航到您的Bigcommerce 管理后台 → 点击商店前台主题自定义

步骤 3. 拖放HTML 块,将嵌入的表单放置在您希望的位置。

步骤 4. 粘贴嵌入代码 → 点击保存 HTML.

步骤 5. 发布更改。您的表单现在已上线。

注意: 该表单仅在更改发布后才会出现。

在 WordPress/WooCommerce 中嵌入表单

步骤 1. 在 Omnisend 中,点击启用 选择手动 复制表单嵌入代码。

步骤 2. 转到您的 WordPress 网站并登录到您的WordPress 仪表板。在这里,您可以管理商店的所有方面,包括添加新的表单元素。

步骤 3. 根据您想要嵌入表单的位置,导航到从仪表板中选择 '页面' 或 '帖子' 然后选择'添加新' 或选择编辑 现有页面/帖子。


步骤 4. 要添加 自定义 HTML 块,点击 + 块 插入器 图标并搜索 'HTML.'

步骤 5. 一旦您添加了该块,您可以将代码粘贴到提供的框中,进行编辑,并在编辑器中预览。

只需几次点击,HTML 就会变成您 WordPress/WooCommerce 商店中的嵌入表单。

与订阅者合作

使用您嵌入表单的客户将立即以订阅状态添加到您的受众中。

所有使用嵌入表单的联系人也将获得一个标签。您可以在设置表单时检查标签。请注意,标签是默认的,无法更改。

由于订阅,您的客户将获得两个标签:一个分配给嵌入表单的默认标签和一个与注册表单相关的默认标签。来源:注册表单。

这些标签可以用于细分,如果您想向特定客户细分发送 活动自动化

注意: 您的默认欢迎自动化将自动触发,适用于使用嵌入表单的客户。您无需为他们设置单独的欢迎自动化。

常见问题

我可以在多个页面上使用相同的嵌入表单吗?

是的。 从 行为设置 将代码添加到您的网站 复制嵌入代码,并将其粘贴到您喜欢的多个页面上。


如果您有更多问题或需要帮助,请通过 [email protected] 或在应用中联系我们。

这是否解答了您的问题?