WordPress決済フォームに条件付きロジックを追加する方法

フリーランスのコンサルタントが新規クライアントプロジェクトの支払いフォームを設定すると想像してみてください。ページにアクセスしたすべての訪問者は、「会社名」、「納税者番号」、「請求書参照」という同じフィールドを目にします。これは、単純なデポジットを支払う個人バイヤーであっても同様です。

フォームは、他の誰かのために構築されたように見えます。一部の訪問者は、支払いを完了する前にタブを閉じます。

これが、条件付きロジックのないWordPress支払いフォームのコストです。フォームは、コンテキストに関係なく、すべての訪問者に同じ質問をします。

複数のバイヤータイプを処理したいサイトオーナーは、すべての人に適用されないフィールドでフォームを煩雑にするか、シナリオごとに個別のフォームを作成します。これにより、価格が変更されるたびにメンテナンス作業が倍増します。

ここで、支払いフォームに条件付きロジックが必要になります。条件付きロジックを使用すると、訪問者が選択または入力したものに基づいてフィールドを表示または非表示にできます。

この記事では、WordPress支払いフォームに条件付きロジックを追加する方法を説明します。

支払いフォームにおける条件付きロジックの重要性

私たちは、洗練された支払いページを作成したものの、フォームが一般的すぎると感じてチェックアウト完了率が低下するのを目にした多くのサイトオーナーと協力してきました。条件付きロジックは、繰り返し発生するいくつかの摩擦点を解決します。

• 長いフォームはチェックアウト放棄を招きます：訪問者に適用されないすべてのフィールドは、支払う前に一時停止する理由となります。条件付きロジックは、各人が入力する際に、表示されるフォームの長さを短く関連性の高いものに保ちます。
• 無関係なフィールドはチェックアウト前に混乱を招きます：「納税者番号」フィールドが表示された個人バイヤーは、正しいフォームにアクセスしたかどうか疑問に思います。チェックアウト時のその疑念の瞬間は、彼らを離脱させるのに十分なことがよくあります。
• 複数のフォームはメンテナンス作業を倍増させます：条件付きロジックがない場合、多くのサイトオーナーは、バイヤータイプまたは価格設定シナリオごとに個別の支払いフォームを作成します。価格または確認メッセージが変更されると、すべてのフォームを個別に更新する必要があります。
• Stripeに誤ったデータが入力されます：オプションフィールドが常に表示されている場合、訪問者はプレースホルダーテキストを入力したり、空白のままにしたりします。条件付きロジックにより、フィールドは適用される場合にのみ表示されるため、Stripeに流れる顧客データは正確で有用なままになります。

さて、WordPressで簡単に設定する方法を見てみましょう。

支払いフォームでの条件付きロジックの設定

支払いフォームに条件付きロジックを追加するには、WP Simple Payを使用します。WooCommerceや完全なショッピングカートなしでStripeに直接シームレスに接続でき、条件付きロジック機能が付属しています。

WP Simple Payは、WordPress向けのナンバーワンStripe支払いプラグインであり、完全なeコマース設定なしで単発および定期的な支払いを受け付けたいフリーランサー、非営利団体、イベント主催者、中小企業向けに構築されています。

Stripeをアドオンとして追加する汎用フォームビルダーとは異なり、WP Simple PayはStripe支払い専用に構築されています。条件付きロジック、カスタムフィールド、支払い処理はすべて同じプラグインの一部です。

そのビジュアルフォームビルダーには条件付きロジックオプションが含まれており、訪問者ごとに適応する支払いフォームを作成できます。

WP Simple Payが提供する機能の一部を以下に示します。

• 条件付きフォームフィールド：訪問者が選択または入力したものに基づいて、カスタムフィールドを表示または非表示にします。コード不要、別フォーム不要、回避策不要です。
• 21種類のカスタムフィールドタイプ：ドロップダウン、ラジオボタン、チェックボックス、テキスト入力、日付ピッカーなどから選択します。各フィールドには独自の条件付きルールがあります。
• リアルタイムのフィールド表示：訪問者がフォームを操作する際に、条件が訪問者のブラウザで即座に評価されます。ページのリロードは不要です。
• 10種類以上の支払い方法：カード、Apple Pay、Google Pay、ACHダイレクトデビット、Klarnaなど。条件付きロジックは、WP Simple Payがサポートするすべての支払い方法と連携して機能します。

これで、WP Simple Payを使用してWordPressの支払いフォームに条件付きロジックを追加する方法を見ていきましょう。

ステップ1：WP Simple Payのインストールと有効化

まず、WP Simple Payのウェブサイトにアクセスしてプランを選択できます。条件付きロジック機能は、WP Simple Pay Pro以上のプランのユーザーが利用できることに注意してください。

次に、WP Simple Pay Proのダウンロードボタンをクリックして、WP Simple Payアカウントダッシュボードから.zipファイルをダウンロードできます。

そこからWordPressダッシュボードに移動し、プラグインファイルをアップロードして、プラグインをインストールおよびアクティブ化します。以前にWordPressプラグインをインストールしたことがない場合は、このWordPressプラグインのインストール方法に関するステップバイステップガイドで全プロセスを説明しています。

プラグインがアクティブになると、WP Simple Payセットアップウィザードが自動的に起動します。オンボーディングフローを開始するには、開始するをクリックしてください。

ウィザードが表示されない場合は、WP Simple Pay »設定 »一般 »詳細設定 に移動し、 セットアップウィザードを起動をクリックしてください。

WP Simple Payがインストールされ、準備が整いました。次に、Stripeに接続します。

ステップ2：WordPressとStripeを接続する

セットアップウィザードで、Stripeで接続ボタンをクリックし、Stripeアカウントのメールアドレスを入力できます。

新規ユーザーは、WordPressを離れることなく、同じ画面から無料のStripeアカウントを作成できます。

認証が完了すると、ウィザードは自動的に進みます。

セットアップ完了画面を確認してセットアップを完了します。これで、サイトはStripeにリンクされ、支払いを処理する準備ができました。

ステップ3：支払いフォームを作成し、カスタムフィールドを追加する

次に、セットアップウィザードの「支払いフォームを作成」ボタンをクリックできます。

または、WP Simple Pay »支払いフォームに移動し、「新しい支払いフォームを追加」ボタンをクリックして新しいフォームを追加することもできます。

ここから、複数の組み込みフォームテンプレートが表示されます。

フォームテンプレートを選択してください。

支払いフォームはほとんどのユースケースで機能しますが、目標に応じて、サブスクリプション支払いフォームやファンラン登録フォームのようなユースケーステンプレートも同様に機能します。

フォームテンプレートを選択した後、一般タブに移動し、フォームにタイトルを付け、表示タイプを選択できます。

オンサイト支払いフォームタイプは、ほとんどのユースケースに適しています。オーバーレイモーダルで開くオプションを選択して、フォームをポップアップとして表示することもできます。

一方、タイプドロップダウンからオフサイトStripeチェックアウトフォームを選択して、訪問者をStripeのホストされたチェックアウトページにリダイレクトすることもできます。

次に、支払いタブを開き、通貨、金額、および支払いが1回限りか定期的なのかを設定します。

そこから、フォームフィールドタブを開く必要があります。フィールドタイプのドロップダウンを使用して、条件付きルールのトリガーおよびターゲットとして機能するフィールドを追加します。

この例では、「顧客タイプ」というラベルのドロップダウンフィールドに「個人」と「法人」というオプションを追加し、次に「会社名」というラベルのテキストフィールドを追加しましょう。

ステップ4：フォームフィールドに条件付きロジックを追加する

両方のフィールドを配置したら、リストで会社名フィールドを展開し、条件付きロジックセクションまでスクロールします。

条件付きロジックを有効にするラベルの下にある「はい」チェックボックスをオンにします。

WP Simple Payは2つの設定を表示します：フィールドのアクション（このフィールドを表示またはこのフィールドを非表示）とルールロジック（すべてのルールが一致（AND）またはいずれかのルールが一致（OR））。

アクションをこのフィールドを表示に設定し、ロジックをすべてのルールが一致（AND）のままにします。

次に、ソースフィールドを顧客タイプ、演算子を次の値と一致、値を設定したい値（この場合はEnterprise）に設定してルールを追加します。この時点から、訪問者がドロップダウンから「Enterprise」を選択するまで、会社名フィールドは非表示のままになります。

プロのヒント： WP Simple Payはフィールドを視覚的に非表示にするだけでなく、完全に無効にします。「会社名」のような必須フィールドは、訪問者が「個人」を選択した場合に非表示になっても、送信をブロックしません。他のフォームビルダーはフィールドを視覚的に非表示にしますが、必須の検証をアクティブにしたままにするため、フィールドが表示されなかった訪問者に対してファントムチェックアウトエラーが発生します。

さらに、フィールドが複数の選択肢に対して表示される必要がある場合は、いずれかのルールが一致（OR）を使用できます。たとえば、訪問者が製品タイプのドロップダウンから「物理製品」または「イベントキット」のいずれかを選択した場合に、「配送先住所」フィールドを表示します。

条件付きルールが必要な他のフィールドについても、このプロセスを繰り返します。各フィールドは独自のルールを独立して管理するため、フォームに条件を追加するのは簡単です。

ステップ5：条件付きロジックフォームを発行してテストする

完了したら、発行をクリックしてフォームを保存します。

次に、WordPressコンテンツエディターからWP Simple Pay – Payment Formブロックを挿入するか、ショートコードを貼り付けることで、任意のページまたは投稿に追加できます。

ブロックを追加したら、ドロップダウンメニューからフォームを選択するだけです。

これで、公開されたページにアクセスして、条件付きロジックで支払いフォームをテストできます。

たとえば、[Business Type]を「Enterprise」に変更すると、ユーザーが会社名を入力できる新しいフィールドが表示されます。

ボーナス：価格オプションで条件付きロジックを使用する

WP Simple PayのPaymentタブは複数の価格オプションをサポートしており、条件付きロジックシステムは訪問者が選択した価格オプションをトリガーにすることができます。

たとえば、「Standard」と「VIP」ティアのある登録フォームでは、「T-shirt Size」ドロップダウンはVIP購入者に対してのみ表示され、標準のチェックアウトはすっきりとしたままになります。

フォームにPaymentタブで複数の価格オプションが設定されている場合、価格セレクターは条件付きロジックルールビルダーのトリガーオプションとして自動的に表示されます。演算子をEqualsに設定し、フィールドを表示する必要がある特定の価格オプションを選択するだけです。

よりスマートなチェックアウトフローの構築に関するその他のアイデアについては、WordPressで支払いフォームテンプレートを使用して売上を伸ばすガイドをご覧ください。

支払いフォームの条件付きロジックに関するFAQ

1. 支払いフォームの条件付きロジックとは何ですか？

条件付きロジックにより、支払いフォームは、訪問者が既に入力または選択したものに基づいてフィールドを表示または非表示にすることができます。「Company Name」フィールドは、訪問者が顧客タイプドロップダウンから「Business」を選択するまで非表示のままにすることができます。これにより、フォームが短くなり、訪問者は自分の状況に適用されるフィールドのみが表示されるようになります。

2. WP Simple Payは条件付きロジックをサポートしていますか？

はい。WP Simple Payには、すべてのProプランのビジュアルフォームビルダーに条件付きロジックが含まれています。サイト所有者は、コードなしでForm Fieldsタブから任意のカスタムフィールドで有効にできます。条件付きロジックはWP Simple Pay Liteでは利用できません。

3. 訪問者が選択した価格オプションに基づいて異なるフィールドを表示できますか？

はい。条件付きロジックシステムには、訪問者が選択した価格オプションをトリガーするPrice equals演算子が含まれています。これは、「T-shirt Size」のようなフィールドが、訪問者がフォームで特定の価格ティアまたはパッケージを選択した場合にのみ表示されることを意味します。

4. ドロップダウン選択に基づいてフィールドを表示または非表示にするにはどうすればよいですか？

Form Fieldsタブで、対象フィールドを展開し、Enable Conditional Logicにチェックを入れます。ソースフィールドをドロップダウンに設定し、演算子としてequalsを選択し、ルールをトリガーする必要があるオプション値を入力します。訪問者が選択すると、フォームは訪問者のブラウザでリアルタイムに更新されます。

5. 1つのフィールドに複数の条件を追加できますか？

はい。各フィールドは複数のルールをサポートしており、すべてのルールに一致 (AND) するか、いずれかのルールに一致 (OR) するかを選択できます。これにより、特定の製品タイプと最低購入金額の両方が選択された場合にのみフィールドを表示するなどのシナリオに対応できます。

支払いフォームに条件付きロジックの使用を開始する

WordPressの支払いフォームに条件付きロジックを追加すると、チェックアウトがより関連性の高いものになります。訪問者は自分の状況に適用されるフィールドのみを確認でき、Stripeに流れるデータはクリーンに保たれ、サイト管理者は多数ではなく1つのフォームを管理できます。

この記事がWordPressの支払いフォームに条件付きロジックを追加する方法を学ぶのに役立ったことを願っています。また、Stripe支払いフォームにカスタムフィールドを追加する方法やWordPressでフォームごとの確認メールメッセージを作成する方法に関するガイドも参照してください。

支払いの受け付けを開始する準備はできましたか？今すぐWP Simple Payで始めましょう。

このような記事をもっと読むには、 X でフォローしてください。