通過彈出窗口向客戶發送折扣代碼 - 教程 - （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 添加的自定義字段）
