ポップアップを介して顧客に割引コードをテキストメッセージで送信-チュートリアル-（WSForm、Twilio、Oxygen）
公開: 2022-07-22このチュートリアルでは、顧客の電話番号と電子メールアドレスを収集するポップアップを作成して、WooCommerceストアのSMSと電子メールのマーケティングリストを作成します。 送信時に、10％オフのクーポンコードをテキストで送信し、このデータをユーザープロファイルに追加します。
これを行うには、WSFormを使用してフォームを作成し、Twilioと統合して、クーポンの作成をトリガーします。 ポップアップとフォームの全体的なスタイル設定には、OxygenBuilderを使用します。 また、ACF Proを使用して、マーケティングの電子メールと電話番号（オプトインデータとともに）をユーザープロファイルに保存します。
酸素ビルダーコース-近日公開！
Oxygen Builder Masteryコースでは、初心者からプロまで、ACF、MetaBox、WooCommerceモジュールが含まれています。
まず、フォームを設定しましょう。 これは、最初に電子メールを収集し、次に電話番号を収集することを目的とした2段階のフォームになります。 これを使用して、SMSを介したマーケティングと電子メールを介したマーケティングに使用する2つの別々のリストを作成できます。
私はそれを2つのステップに分割しています。これにより、誰かがメールを入力すると、さらに別のテキスト入力が表示されたときにフォームを放棄する可能性が低くなるため、コンバージョン率が向上するはずです。
まず、メール用と電話番号用の2つのタブを追加します。
最初のタブには電子メール入力があり、クリックするとフォームの次のステップを表示する続行ボタンが付いています。
メール入力フィールドの[詳細設定]タブに、メールを検証する正規表現パターンを追加しました。
次のタブはもう少し複雑です。
ここでは、ユーザーの電話番号を収集します。 これは、組み込みの電話番号フィールドを使用し、国際的な選択が含まれています。
ただし、3つの追加フィールドがあります。 クーポンテキストと日時同意フィールドの両方がフロントエンドユーザーから非表示になり、動的に入力されます。 同意フィールドは、ユーザーがフォームを送信するために選択する必要がある必須のチェックボックスです。
日付同意フィールドには、JavaScriptを使用して日付とタイムスタンプの両方が入力されます。 フォームが送信されると、この情報がACFフィールドに追加され、フォームが送信されて同意された特定の瞬間が示されます。 これは、SMSまたは電子メールマーケティングプラットフォームにデータをエクスポートしようとしている場合に、これが「実際の」ユーザーであることを証明するときに役立ちます。
クーポンテキストの入力もユーザーには表示されません。 このフィールドは、ユーザーの表示名とランダムに生成されたテキストの文字列を組み合わせた動的クーポンを生成します。 これを使用して、WooCommerceで送信されたメールアドレスに割り当てられたクーポンを自動的に作成します。
送信ボタンにはHTMLが含まれています。酸素と選択した検出器を使用してフォームをスタイリングするときに、これを再検討します。 現在のところ、フロントエンドでのフォームは次のようになります。
フォームが必要なすべてのデータを収集しているので、いくつかの送信アクションを作成しましょう。 これらは、ユーザーがフォームを送信するときに実行されるアクションです。
送信すると、上記の順序で4つのことが起こります。
まず、上記のフィールドで自動生成されたクーポンをWooCommerceに追加します。
次に、数分でコードを含むテキストを期待する必要があるというメッセージがユーザーに表示されます。
次に、WSForm Twilio統合を使用して、送信時に入力した電話番号にコードをテキスト送信します。
最後に、WordPressユーザープロファイルのユーザー情報を更新し、ACFで作成されたカスタムフィールドに電話番号と電子メールの両方を追加します。
WooCommerceへのクーポンの追加は、WSFormといくつかのカスタムPHPに組み込まれている「WordPressフックの実行」送信アクションを使用して行われます。
このコードは、WSformフィールドで生成されたコードからWooCommerceクーポンをプログラムで追加します。
フォームが送信されると、このコードがすべて実行されます。
WSFormの送信から、電子メール、電話、クーポンコードを取得します。 次に、クーポンを生成します。
この例では、クーポンはカートから$ 10を提供し、1回使用でき、フォームで送信された電子メールに制限されています。
クーポンをWooCommerceに追加し、送信された電子メールに割り当てた後（これは詐欺を減らすために行われます）、ユーザーに成功メッセージを表示します。
メッセージのパーソナライズに使用される動的な#field(5)に注意してください。
次に、実際にテキストをユーザーに送信します。 これは、WSFormが提供するTwilio統合を使用しており、セットアップが簡単です。
まず、アドオンをインストールし、APIキーを貼り付けてTwilioアカウントに接続します。
ここで、フォーム送信アクションの下に戻って、テキストメッセージを構成します。
差出人番号を選択し、同意フィールドに接続して、メッセージの送信先の電話番号を動的に追加します。 メッセージ自体も動的に作成され、静的なウェルカムメッセージと動的なクーポンを組み合わせて、自動生成された非表示フィールドから入力されます。
必要に応じて、GIFやメディアを追加することもできます。
最後に、提出されたデータを有用な場所に保存します。 この状況では、ACFproを使用してユーザープロファイルにフィールドを作成しました。
最後のアクションでは、WSForm User Managementアドオンを使用して、このデータをユーザープロファイルの下のカスタムフィールドに追加します。
ただし、WSFormの多くの統合を使用して、この情報をGetResponseまたは別のマーケティングプラットフォームに送信する方が適切な場合があります。
フォームの全体的な機能とメカニズムが機能しているので、ポップアップを作成して、このマーケティングデータキャプチャフォームをWebサイトのフロントエンドに移動します。
Oxygen BuilderとWSFormは、素晴らしい組み合わせになります。 ビルダーを使用すると、フォームの送信が簡単になり、スタイルの設定もさらに簡単になります。
再利用可能なパーツ（このポップアップを好きな場所に挿入できる）を使用して、最初にポップアップを追加し、フォームを追加して、最後にスタイルを設定します。
モーダル、列、その他のいくつかの要素を使用して、クラシックな50％50％のポップアップを作成しています。
ショートコードを使用してフォームを挿入しました。
終了インテントでトリガーされます。
今、私がする必要があるのは、WSFormのスタイルを設定することだけです。 組み込みのカスタマイザーを使用してこれを行うことはできますが、それは少し制限されています。 カスタムCSSを作成することもできますが、それは視覚的ではありません。 3番目のオプションは、Oxygen Builderに付属の組み込みのセレクター検出器を使用し、エディターを使用してスタイリングすることです。 これは、デフォルトで有効になっていないという理由だけで、多くの人が利用していないものです。 したがって、酸素の設定ページに移動し、セレクター検出器を有効にします。
次に、shortcode要素をクリックして、下部にある[selectordetector]をクリックします。
これを使用して入力とボタンをクリックし、[詳細設定]タブを使用してスタイルを設定します。
組み込みのWSフォームのOxygen要素の代わりに短いコード要素を使用します。これは、短いコードを無効にしてから再レンダリングし、フォームの元のタブに戻すことができるためです。 WSForm自体を編集すると、ビルダーをリロードしなくてもショートコードを再レンダリングできます。
検出器を使用すると、HTMLの任意の部分をターゲットにでき、2番目のボタンで追加されたスパンを編集して、フォントを小さくすることができます。
そして、まさにそのように、WooCommerceサイト用に次のようなカスタムフォームを作成しました。
- 出口の意図でポップアップし、10ドルの割引を提供します
- WSFormを使用して2つのステップで電子メールと電話番号を収集します
- 酸素を使用してブランドガイドラインに合わせてカスタムおよびスタイル設定されています
- WooCommerceで送信された電子メールに割り当てられた一意のクーポンコードを追加します
- 送信された電話番号にクーポンコードをテキスト送信します
- このデータをユーザープロファイルに送信します（ACFプロで追加されたカスタムフィールド）
