通过弹出窗口向客户发送折扣代码 - 教程 - （WSForm、Twilio、Oxygen）
已发表: 2022-07-22在本教程中，我们将构建一个弹出窗口，用于收集客户的电话号码和电子邮件地址，以便为我们的 WooCommerce 商店构建 SMS 和电子邮件营销列表。 提交后，我们将向他们发送 10% 折扣优惠券代码并将此数据添加到他们的用户资料中。
为此，我们将使用 WSForm 创建表单，与 Twilio 集成并触发我们的优惠券创建。 我们将使用 Oxygen Builder 进行整体弹出和表单样式。 我们将使用 ACF Pro 将营销电子邮件和电话号码（以及选择加入数据）存储在用户配置文件中。
氧气生成器课程- 即将推出！
Oxygen Builder Mastery 课程将带您从初学者到专业人士 - 包括 ACF、MetaBox 和 WooCommerce 模块。
首先，让我们设置表单。 这将是一个两步表格，旨在首先收集电子邮件，然后收集电话号码。 有了它，我们可以建立两个单独的列表，用于通过 SMS 进行营销和通过电子邮件进行营销。
我将它分为两个步骤，希望可以提高转换率，因为一旦有人输入了电子邮件，他们就不太可能在收到另一个文本输入时放弃表单。
首先，我们添加 2 个选项卡，一个用于电子邮件，一个用于电话号码。
第一个选项卡有一个电子邮件输入，加上一个继续按钮，单击该按钮会显示表单的下一步。
在电子邮件输入字段的高级设置选项卡下，我们添加了一个将验证电子邮件的正则表达式模式。
下一个选项卡有点复杂。
在这里，我们收集用户的电话号码。 这使用内置电话号码字段，并包括国际选择。
但是，还有三个附加字段。 优惠券文本和日期时间同意字段都对前端用户隐藏，并动态填充。 同意字段是用户提交表单时必须选中的必填复选框。
日期同意字段使用 JavaScript 填充日期和时间戳。 提交表单时，此信息将添加到 ACF 字段，显示他们使用提交表单并获得同意的特定时刻。 如果我尝试将数据导出到 SMS 或电子邮件营销平台，这在证明这是一个“真实”用户时很有帮助。
优惠券文本输入也对用户隐藏。 此字段生成一个动态优惠券，结合用户显示名称和随机生成的文本字符串。 我们将使用它来自动创建分配给 WooCommerce 中提交的电子邮件地址的优惠券。
提交按钮中有一些 HTML，我们将在使用 Oxygen 和选定的检测器设置表单样式时重新访问它。 截至目前，前端的表单如下所示：
现在表单正在收集我们需要的所有数据，让我们创建一些提交操作。 这些是用户提交表单时执行的操作。
提交时，会发生 4 件事，按照上面显示的顺序。
首先，它将在上述字段中自动生成的优惠券添加到 WooCommerce。
然后，它会向用户显示一条消息，提示他们应该在几分钟内收到带有代码的文本。
然后，使用 WSForm Twilio 集成，它将代码发送到提交期间输入的电话号码。
最后，它会更新 WordPress 用户配置文件中的用户信息，将电话号码和电子邮件添加到使用 ACF 创建的自定义字段中。
将优惠券添加到 WooCommerce 是通过使用 WSForm 和一些自定义 PHP 中内置的“运行 WordPress 挂钩”提交操作来完成的。
此代码以编程方式从 WSform 字段中生成的代码添加 WooCommerce 优惠券。
提交表单后，所有这些代码都会运行。
我们从 WSForm 提交中获得电子邮件、电话和优惠券代码。 然后我们生成一张优惠券。
在此示例中，优惠券提供购物车 10 美元的优惠，可以使用一次，并且仅限于在表单中提交的电子邮件。
在将我们的优惠券添加到 WooCommerce 并将其分配给提交的电子邮件后（这样做是为了减少欺诈），我们向用户显示一条成功消息：
注意用于个性化消息的动态#field(5) 。
然后，我们实际上将文本发送给用户。 这使用了 WSForm 提供的 Twilio 集成，并且易于设置。
首先，我们安装插件，并通过粘贴我们的 API 密钥将其连接到 Twilio 帐户。
现在，回到表单提交操作下，我们配置文本消息。
我们选择发件人号码，连接我们的同意字段，并动态添加要发送消息的电话号码。 消息本身也是动态创建的，结合了静态欢迎消息和动态优惠券，从自动生成的隐藏字段填充。
如果需要，我们还可以添加 GIF 和媒体。
最后，我们将提交的数据存储在有用的地方。 在这种情况下，我使用 ACF pro 在用户配置文件中创建字段。
最后一个操作使用 WSForm 用户管理插件将此数据添加到用户配置文件下的自定义字段中。
但是，最好使用 WSForm 的许多集成将此信息发送到 GetResponse 或其他营销平台：
现在表单的整体功能和机制正在运行，让我们构建我们的弹出窗口，将这个营销数据捕获表单带到网站的前端。
Oxygen Builder 和 WSForm 是一个很好的组合。 使用构建器，很容易提交表单，甚至更容易设置样式。
使用可重复使用的部分（它允许我在任何我想要的地方插入此弹出窗口），我将首先添加弹出窗口，添加表单，最后设置样式。
我正在使用模态、列和其他一些元素来制作经典的 50% 50% 弹出窗口。
我已经使用简码插入了表单。
它触发退出意图。
现在，我需要做的就是设置 WSForm 的样式。 我可以通过使用内置定制器来做到这一点，但这有点有限。 我也可以只编写自定义 CSS，但这不是可视化的。 第三种选择是使用 Oxygen Builder 附带的内置选择器检测器，并使用编辑器进行样式设置。 这是许多人没有利用的东西，因为它在默认情况下未启用。 因此，进入氧气的设置页面，并启用选择器检测器。
现在，单击短代码元素，然后单击底部的“选择器检测器”。
使用它来单击输入和按钮，使用高级选项卡进行样式设置。
我使用短代码元素而不是内置的 WS 表单 Oxygen 元素，因为我可以禁用短代码，然后重新渲染它，让我回到表单的原始选项卡。 如果我编辑 WSForm 本身，我可以重新呈现简码，而无需重新加载构建器。
使用检测器，我可以定位任何 HTML，允许我编辑第二个按钮中添加的跨度，使字体更小。
就像这样，我们为我们的 WooCommerce 网站构建了一个自定义表单：
- 弹出退出意图，提供 10 美元的折扣
- 使用 WSForm 分两步收集电子邮件和电话号码
- 使用氧气根据品牌指南进行定制和设计
- 添加分配给 WooCommerce 中提交的电子邮件的唯一优惠券代码
- 将优惠券代码发送到提交的电话号码
- 将此数据发送到用户配置文件（使用 ACF pro 添加的自定义字段）
