跳转到主要内容

创建嵌入式订阅表单(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。检查并调整您的表单设置

在右侧菜单中,您会找到行为主题设置选项卡:

行为设置

主题设置

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

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

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

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

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

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

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

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

嵌入代码

自定义您的表单后,您需要启用它才能生成嵌入代码。

点击顶部菜单中的Enable。您会看到选项,以选择如何嵌入您的表单:

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

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

您也可以稍后通过点击 Behavior SettingsShow setup instructionsChoose how to embed your form → 选择 ShopifyManual 来找到嵌入代码。

注意:嵌入表单并非一刀切的解决方案,因为它通常需要根据您的店铺主题进行调整。如需获取特定平台的详细指南,请参阅下方适用于您的电子商务平台的文档:Shopify,BigCommerce,或WordPress/WooCommerce

在 Shopify 中嵌入表单

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

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

注意:如果Omnisend Embedded Form 应用嵌入未启用,您将首先被重定向到在 App embeds 中启用。启用后,返回主题编辑器继续。详细了解 Shopify App Embeds

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

第 3 步。 拖动将 Omnisend Embedded Form 区块添加到您在主题布局中的首选位置。

💡 小贴士: 尝试不同的放置位置,将您的表单放置在对网站访客而言显眼且吸引人的区域。

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

您的表单现在将显示在您的店铺。

在 Shopify 中手动嵌入:

如果需要,您随时可以使用嵌入代码手动嵌入表单。

  1. 在 Shopify 后台,前往 Online StoreThemesEdit theme

  2. 点击 Add section → 选择 Custom Liquid

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

在 BigCommerce 中嵌入表单

以下步骤适用于所有根据 BigCommerce 标准构建的主题。如果您的主题已导入,但不是在 BigCommerce 中构建的,您必须咨询您的主题开发者,以了解如何嵌入代码。

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

第 2 步。 前往您的BigCommerce 管理后台 → 点击店面主题自定义

步骤 3. 拖放您希望放置嵌入式表单的HTML 块

第 4 步。粘贴嵌入代码 → 点击保存HTML

第 5 步。发布更改。您的表单现已上线。

注意: 仅当更改发布后,表单才会显示。

在 WordPress/WooCommerce 中嵌入表单

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

第 2 步。 前往您的 WordPress 网站并登录您的WordPress 仪表盘。在这里,您可以管理您的店铺的方方面面,包括添加新的表单元素。

步骤 3. 根据您想要嵌入表单的位置, 前往从仪表盘中选择'页面'或'文章',然后选择'Add New' 或选择'编辑'现有的页面/帖子


第 4 步。要添加 Custom HTML block,请点击 + Block Inserter 图标并搜索 'HTML'。

第 5 步。添加区块后,您可以在提供的框中粘贴您的代码、进行编辑,并在编辑器中预览。

只需点击几下,HTML 就会变成您 WordPress/WooCommerce 店铺中的一个嵌入式表单。

处理订阅者

使用您嵌入式表单的客户将立即以“已订阅”状态添加至您的受众。

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

订阅后,您的客户将获得两个标签:一个分配给嵌入式表单的默认标签,以及一个与注册表单关联的默认标签。注册表单

如果您想向特定的客户细分(Segment)发送营销活动(Campaign)自动化流程(Automation),这些标签可用于细分受众(Segmentation)。

注意: 您的默认欢迎自动化流程(Automation)将为使用嵌入式表单的客户自动触发。您无需为他们设置单独的欢迎自动化流程(Automation)。

常见问题

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

是的从 Behavior Settings Add code to your website 复制嵌入代码,并将其粘贴到任意数量的页面上。


如果您还有任何问题或需要帮助,请通过 [email protected] 或在应用内联系 Omnisend。

这是否解答了您的问题?