如何在 WordPress 中添加弹出表单(分步教程)

已发表: 2024-02-06

您想向您的网站添加弹出表单吗?

弹出窗口可帮助您在正确的时间吸引用户的注意,让他们采取行动,例如注册新闻通讯或完成购买。

将弹出窗口添加到网站的最佳方法是使用 WordPress 弹出窗口插件。 这样可以轻松创建在正确的时间和地点出现的自定义弹出窗口,以吸引用户参与其中。

在本分步教程中,我们将向您展示如何在 10 分钟内在 WordPress 网站上创建弹出表单。

如何创建 WordPress 弹出表单

在本教程中,我们将使用一个名为 OptinMonster 的强大工具。

选择怪物

OptinMonster 毫无疑问是世界上排名第一的 WordPress 弹出窗口生成器。 它拥有为您的网站创建和自定义令人惊叹的弹出窗口所需的一切。

您可以从 50 多个预制模板中进行选择,也可以从头开始。 弹出窗口生成器易于使用,使其成为初学者的绝佳选择。 它基于拖放界面,因此您可以通过将元素拖放到您希望它们出现的位置来直观地构建弹出窗口。

您可以完全控制弹出窗口的各个方面,包括颜色、图像、视频、背景等。

OptinMonster 的突出之处在于其强大的定位规则。 这可以让您在用户执行以下操作时显示弹出窗口:

  • 查看特定页面
  • 即将退出您的网站
  • 暂时不活动
  • 位于特定地理区域
  • 来自特定的推荐来源
  • 滚动到页面上的特定点
  • 来自特定的推荐来源
  • 已将商品添加到购物车但未结账
  • 新用户或重复用户
  • 使用笔记本电脑或手机等特定设备

像这样,您可以使用很多规则来在用户更有可能做出响应的正确时间和地点显示弹出窗口。 这极大地改善了用户体验,这也促进了 SEO。

首先,您要做的第一件事是注册 OptinMonster 帐户。 然后确保您在单独的选项卡中登录您的 OptinMonster 帐户。

OptinMonster 附带一个免费的 WordPress 连接器插件。 您可以从 WordPress.org 存储库将其安装到您的网站上。

选择怪物

激活后,您可以连接到您现有的帐户。 OptinMonster 将自动检测您在其他选项卡上的登录并连接您的站点。

现在您已准备好创建您的第一个 WordPress 弹出窗口。

第 1 步:创建弹出式营销活动

从 WordPress 仪表板导航至OptinMonster » Popup 。 这将打开模板库。

在 OptinMonster WordPress 仪表板中创建弹出窗口

在此页面上,首先选择弹出窗口并选择您的模板。 您可以浏览此处的选项,找到合适的选项后,单击将鼠标悬停在其上时出现的“使用模板”按钮。

在 OptinMonster 中选择弹出窗口和模板

然后您将看到一个弹出窗口,您可以在其中为您的活动添加名称。

开始在 OptinMonster WordPress 插件中构建弹出窗口

这是供内部使用的,以便您可以使所有 OptinMonster 活动井井有条。

第 2 步:自定义弹出窗口

现在,您将看到 OptinMonster 活动构建器,并在右侧预览您选择的模板。 左侧有一个任务栏,其中包含添加新块和进行编辑的选项。

选择怪物建造者

这是一个“是/否”活动模板。 这意味着用户可以选择单击“是”按钮,然后输入电子邮件 ID 来兑换下一页上的优惠。 或者,他们可以通过点击“否”按钮拒绝该优惠,活动将立即结束。

您只需单击弹出框中即可编辑弹出框中的内容。 然后选择文本,将其删除并输入您自己的文本。 您还会看到出现一个编辑工具栏,可让您更改字体、格式、大小等。

在 OptinMonster 中编辑文本

接下来,让我们更改广告活动中的图像。 选择它,您将看到一个替换左侧图像的选项。

更改 OptinMonster 中的图像

您可以从本地计算机上传图像或从 Unsplash 库存库中选择一张图像。 在此菜单中,您还会看到用于对齐图像、更改其宽度、添加替代文本等的选项。

如果您想更改号召性用语 (CTA) 按钮,可以单击它,在左侧,您将看到用于输入您自己的按钮文本的选项。 下面,您可以确定当用户单击按钮时会发生什么。

OptinMonster 弹出窗口中的自定义按钮

您还可以通过此按钮跟踪转化,以便了解您的广告系列是否带来了结果。

如果您切换到此处的“高级”选项卡,您将看到用于更改按钮样式、背景、字体、间距等的选项。

OptinMonster 中的高级设置

如果您想添加新块,只需将其拖放到预览中即可。 我们将放入嵌入表单块。 这允许您通过在此处输入表单的短代码来将任何表单添加到弹出窗口。

在 OptinMonster 中嵌入表单块

OptinMonster 还可以与 WPForms 无缝协作——WPForms 是 WordPress 最强大的表单插件。 您可以将 WPForms 块添加到您的活动中,然后从下拉菜单中选择您的表单或添加短代码。

OptinMonster 中的 WPForms 块

例如,您可以在此处嵌入联系表单来收集您的用户名和电子邮件 ID。

想要了解如何使用 WPForms 构建表单? 按照我们的教程 » 如何在 WordPress 中添加联系表单(5 个简单步骤)。

如果您想使用 HTML 代码嵌入表单,可以使用专用的 HTML 块。

最后,您还需要切换到构建器页面底部的“成功”选项卡。 这是用户提交弹出表单后将显示的消息。

OptinMonster 中的成功消息

您可以对其进行自定义以匹配您的整体设计。

当您对广告系列设计感到满意时,请点击构建器顶部的“保存”按钮。 然后您可以继续下一步,我们将向您展示如何添加定位规则。

第 3 步:将定位规则添加到弹出窗口

在顶部菜单栏中,切换到“显示规则”选项卡。 在这里您将看到,默认情况下,如果用户在任何页面上花费至少 5 秒,OptinMonster 将显示此弹出窗口。

要更改此设置,请单击“页面停留时间”,您将看到显示规则库出现。

OptinMonster 显示规则选项卡

该库充满了强大的规则,可以精确定位您的受众。 这些规则按照谁、何时、何地、现场重定向和电子商务进行了整齐的分类。

OptinMonster 显示规则选项

您可以使弹出窗口在单击时、在页面加载时立即出现或延迟一段时间出现。

在本教程中,我们将选择“退出意图”功能。 这将检测用户何时即将退出网站,并显示联系表单弹出窗口以让他们留下来。

现在您将看到添加了“检测到退出”规则。 您可以选择在所有设备或特定设备上显示,例如仅在笔记本电脑上显示,而不在移动设备上显示。 您还可以选择探测器使用的灵敏度级别。 我们建议在这里将其保留为“中”。

对于第二条规则,您可以选择在特定页面上定位受众。 如果用户在结帐页面上放弃该网站,我们将选择显示此弹出窗口。

因此,我们将此处的规则设置为“当前 URL 路径包含结账”。

最终确定 OptinMonster 显示规则

准备好后,点击“完成?” 转到“操作”。 在下一页上,这个弹出窗口制作插件允许您选择向您的活动添加动画和声音效果。

这确实会让你的竞选活动流行起来!

OptinMonster 怪物效果

确保保存更改并继续下一步。

第 4 步:与电子邮件和分析集成

如果您想将新的潜在客户直接发送到您的电子邮件营销或 CRM 帐户,OptinMonster 可以让您轻松实现这一点。 在“集成”选项卡下,您可以快速连接到 HubSpot、Constant Contact、Mailchimp、Zapier 等平台上的帐户。

OptinMonster 集成

您所要做的就是单击要连接的服务,然后按照屏幕上的说明完成集成。 不涉及复杂的步骤。

连接到持续接触

连接帐户后,所有新潜在客户都会自动标记并添加到您的电子邮件列表中。

在下一个选项卡“分析”中,您将看到默认情况下 OptinMonster 带有内置分析功能。 它还可以跟踪营销活动浏览量、点击量和收入。

如果您想在那里收集数据,您还可以将您的营销活动连接到 Google Analytics。 您还可以获得有关 WooCommerce 数据的宝贵见解。

连接到 OptinMonster 中的分析

现在您已准备好发布活动。

第 5 步:在 WordPress 中发布弹出窗口

打开 OptinMonster 活动构建器中的“发布”选项卡。 您可以在此处将您的营销活动连接到多个网站。 OptinMonster 还在右侧边栏上为您提供了弹出设置的概述。

发布 OptinMonster 弹出窗口

要发布活动,请将状态设置为“发布” ,您将看到顶部菜单更改为“已发布”并带有绿色勾号。

如果您想预览新的弹出窗口,可以在此处执行此操作。 这将带您进入 OptinMonster 活动测试工具。 它将向您实时预览弹出窗口在 WordPress 网站或特定网页上的外观。

OptinMonster 活动测试工具

就是这样。 您的活动已上线。

由于您使用的是 WordPress 连接器插件,因此您需要前往 WordPress 仪表板。 转到OptinMonster » 活动。 在这里,请确保点击“发布”按钮,以便将活动状态设置为“已发布”。

将 OptinMonster 活动设置为已发布

用户开始与弹出窗口交互后,您将看到统计信息显示在该页面上的活动旁边。 您可以查看网站访问者、转化率和转化率。 “操作”列下还有一个分析图标。 这将使您更深入地了解所有 OptinMonster 活动。

最后,您还可以设置 A/B 测试活动,以了解哪些内容更适合您的受众。

就这样。

您已成功在您的网站上创建、自定义并发布了弹出窗口。 另外,您可以继续使用 OptinMonster 为您的网站构建所有类型的弹出窗口。

OptinMonster 是一个专业插件。 如果您正在寻找免费版本的弹出窗口制作器,请查看我们关于增加潜在客户和销售的最佳 WordPress 弹出窗口插件的指南。

我们希望本教程对您有所帮助。

如果您有兴趣了解有关创建 WordPress 表单的更多信息,请查看我们的 WPForms 101 课程,其中包含易于理解的视频 WordPress 教程。

接下来,我们建议您查看我们的其他指南:

  • 7 个最佳 WordPress 表单生成器插件(比较)
  • 19 个最佳 WordPress 页面构建器评测(专家精选)
  • 13 个最佳 WordPress 潜在客户开发插件(比较)

这些指南揭示了更多在网站上构建表单和页面的最佳工具。 最后一篇文章将帮助您在网站上获得更多潜在客户。