AI要約
WordPressフォームからサードパーティのアプリまたはプラグインにデータを送信したいですか？ WPForms Webhooksアドオンを使用すると、フォームをセカンダリサービスに接続できます。
このチュートリアルでは、WPFormsでWebhooksアドオンをインストールして使用する方法を説明します。
要件:
- Webhooksアドオンにアクセスするには、エリートライセンスレベルが必要です
- Webhooksアドオンの最小必要バージョンを満たすために、WPFormsの最新バージョンがインストールされていることを確認してください
Webhooksとは？
Webhookを使用すると、フォームからWordPressサイト外の他のサービスまたはツールに情報を自動的に送信できます。これは、統合が必要だが、まだアドオンが利用できない場合に特に役立ちます。
Webhookを設定する最も簡単な方法は、Zapierアドオンを使用することです。Zapierは、ウィザード形式のセットアップを使用するため、すべてのユーザーレベルに適しており、フォームを別のサービスに接続するために必要なすべてのステップを案内します。
もう1つのオプションは、Uncanny Automator連携です。この機能を使用すると、サポートされているアプリとサービス間の接続を作成できます。
より高度なユーザー向けに、Webhooksアドオンはコネクタサービスなしで同様の機能を提供します。ただし、トレードオフとして、セットアッププロセスはより技術的になります。
Webhooksアドオンのインストール
開始する前に、まずWPFormsがWordPressサイトにインストールおよびアクティブ化されていることを確認する必要があります。
WPFormsがインストールされ、ライセンスが検証されると、Webhooksアドオンをすばやくインストールおよびアクティブ化できるようになります。
Webhookの設定
インストールプロセスが完了したら、Webhookを設定する準備ができました。開始するには、新しいフォームを作成するか、既存のフォームを編集する必要があります。
フォームビルダーを開いたら、設定 » Webhooksの下でWebhookを有効にできます。ここから、Webhookを有効にするオプションをオンにします。
これにより、Webhookの名前付けを含む、設定できる追加の設定が開きます。
デフォルトでは、新しいWebhookには名前がありません。Webhookに名前を編集または追加したい場合は、鉛筆アイコンをクリックします。
さらに、他のWebhookを追加したい場合は、新しいWebhookを追加というラベルのボタンをクリックして、各追加接続の設定を入力できます。
Webhookの名前の下に、この接続で利用可能なすべての設定が表示されます。以下に、それぞれの機能の概要を説明します。
リクエストURL
リクエストURLは、WPFormsをセカンダリアプリに接続するために使用されます。通常、基本的な接続を設定した後、サービスまたはツールのAPIからこのURLを取得できます。
リクエストメソッド
リクエストメソッドを使用すると、Webhookリクエストが実行されるときに使用したいHTTPメソッドを選択できます。
接続したい接続の種類に応じて、いくつかの異なる方法を選択できます。
- GET: GETメソッドは、送信されたフォームから情報を取得し、接続されたアプリに詳細を送信します。
- POST: POSTメソッドは、WPFormsを通じて送信された情報を受け取り、二次サービスに送信します。
- PUT: PUTメソッドは、Webhookが実行されたときにデータを更新できます。
- PATCH: PATCHメソッドは、Webhookが実行されたときにデータを置き換えることができます。
- DELETE: DELETEメソッドは、この特定のWebhookが実行されたときに情報を削除できます。
リクエスト形式
リクエスト形式は、Webhookを通じて送信されているデータの種類をサーバーに伝えます。これにより、データのContent-Typeヘッダー値も設定されます。
2つの異なるリクエスト形式が利用可能です：
- JSON: JSONメソッドは、データを
application/json形式でフォーマットし、コンテンツタイプをcharset=utf-8に設定します。 - FORM: FORMメソッドは、データを
application/x-www-form-urlencoded形式でフォーマットし、コンテンツタイプをcharset=utf-8に設定します。
注意: データは通常JSON形式で送信されます。これにより、サーバー側での変更（検証、フォーマット、サニタイズの変更を含む）が容易になります。
シークレット
シークレットキーは、完了した各リクエストにハッシュ（または一意のID）を生成します。これはHTTPリクエストの送信元を検証するための署名として機能し、常にリクエストヘッダーで提供されます。
注意: ほとんどの場合、フォームをサードパーティサービスと連携させる場合、シークレット設定を入力する必要はありません。シークレット設定は、開発者が自身のAPIと連携する際に、リクエストの送信元を検証する方法として意図されています。
リクエストヘッダー
リクエストヘッダーを使用すると、Webhookリクエストと共に送信されるHTTPヘッダーのキーと値のペアを定義できます。
注意: この設定は、認証済みリクエストのためにHTTPヘッダーにAPIキーを渡そうとしている場合に特に役立ちます。WPFormsの非表示フィールドを使用して、独自のAPIキーを入力できます。
リクエストボディ
リクエストヘッダーと同様に、リクエストボディ設定では、Webhookリクエストのボディで送信されるキーと値のペアを定義できます。
注意: アドレス、ドロップダウン、チェックボックスなどのフィールドで複数の値を区切るために、WPFormsは2つの縦線（例：||）を使用します。
例：Webhooksを使用してWPFormsをSlackに接続する
注意: よりユーザーフレンドリーなSlack連携のためには、専用のSlackアドオンの使用をお勧めします。このアドオンは、より簡単なセットアップと追加機能を提供します。詳細については、Slackアドオンガイドを参照してください。
例として、WPFormsをSlackアカウントにWebhookを使用して接続する方法を説明します。
注意: この例では、単一のフォームフィールドをSlackに送信する方法を説明します。複数のフィールドをSlackに送信したい場合は、詳細について開発者向けドキュメントを確認してください。
Slackアプリの作成
まず、SlackのAPIページに移動する必要があります。次に、アプリを作成ボタンをクリックします。
これによりオーバーレイが表示され、アプリの構成方法を選択する必要があります。「スクラッチから作成」オプションを選択します。
次に、アプリの名前を付け、フォームデータを送信したいワークスペースを選択できるようになります。この例では、アプリの名前をContact Sullieとします。「アプリを作成」ボタンをクリックして続行します。
これにより、アプリに関する基本的な情報が表示されるページに移動します。「機能と機能の追加」設定までスクロールし、「受信Webフック」オプションを有効にします。
受信Webフック設定を有効にしたら、「受信Webフックを有効にする」オプションを「オン」に切り替えます。これにより、ページの下部により多くの詳細が表示されます。
「ワークスペースのWebフックURL」セクションの下にある「ワークスペースに新しいWebフックを追加」ボタンをクリックします。
これにより、別のオーバーレイにリダイレクトされ、メッセージを送信するSlackチャネルを選択する必要があります。ドロップダウンからチャネルを選択し、「許可」をクリックします。
これにより、前のページに戻ります。「ワークスペースのWebフックURL」セクションに新しいURLが表示されます。次のステップで使用するため、このURLをコピーしてください。
後で情報が必要になるため、このブラウザタブまたはウィンドウを開いたままにしておいてください。
フォームにSlack Webフックを追加する
次に、Webフックを使用するフォームを開く必要があります。まだ設定していない場合は、WPFormsでWebフックアドオンを設定していることを確認してください。
フォームでWebフックを有効にしたら、SlackからコピーしたURLを「リクエストURL」フィールドに貼り付けて、フォームとSlackのAPIを接続します。
次に、残りのWebフック設定を構成します。この例のすべての構成設定を以下に示します。
- リクエストメソッド: フォームからSlackにデータを送信するため、リクエストメソッドを「POST」オプションに設定します。
- リクエスト形式: リクエスト形式を標準の「JSON」に設定します。
- シークレット: この例では、シークレットフィールドを空白のままにし、Webフックが実行されるときに自動生成されるようにします。開発者で独自のシークレット値を入力したい場合は、ここに入力できます。
- リクエストヘッダー: リクエストと共に送信する必要のある特定の値はありませんので、リクエストヘッダー設定は空白のままにします。Webフックが実行されると、自動生成されたシークレットがここに配置されます。
- リクエストボディ:
- キー：リクエストボディパラメータのキーフィールドにtextと入力してください。フォームはプレーンテキストで情報を送信します。このフィールドの値としてtextを入力しないと、接続でエラーが発生する可能性が高くなります。
- フィールドの選択：選択フィールドの設定は、送信したいデータのフィールド名になります。例では、コメントまたはメッセージフィールドのデータをSlackに送信します。
フォームビルダーを離れる前に、変更を保存することを忘れないでください。また、設定が完了したら、フォームをテストして、Webhookが正しく機能していることを確認することをお勧めします。
条件付きロジックの追加（オプション）
条件付きロジックを使用すると、フォームでのユーザーの選択に基づいてアクションを実行するかどうかを選択できます。
例として、ユーザーが連絡フォームに「Help」という単語を含むメッセージを送信した場合に、Slackにメッセージを送信するために条件付きロジックを使用する方法を示します。
これを設定するには、フォームに1行テキストまたは段落テキストフィールドがあることを確認する必要があります。例では、段落テキストフィールドを追加します。
次に、メッセージ入力フィールドのラベルを調整する必要があります。例では、コメントまたはメッセージというラベルを追加します。
次に、条件付きロジックを設定する必要があります。Slack Webhookの設定の下部にある、条件付きロジックを有効にするというラベルのオプションをオンにして、ルールを作成するためのドロップダウンを表示します。
次に、条件付きロジックのルールを追加します。例では、ドロップダウンを、コメントまたはメッセージにhelpが含まれる場合にこのWebhookを送信するように設定します。
注：条件付きロジックルールの設定でお困りですか？WPFormsでの条件付きロジックの使用に関する初心者向けチュートリアルには、すべての詳細が記載されています。
いつものように、ビルダーを離れる前にフォームを保存することを忘れないでください。
よくある質問
これらは、Webhookアドオンに関してよく見られる質問の一部です。
リクエストヘッダーとリクエストボディでスマートタグをどのように使用できますか？
スマートタグは、フォームのリクエストヘッダーとリクエストボディに動的に情報を挿入するために使用できます。
スマートタグを使用するには、Webhookの設定からリクエストヘッダーのドロップダウンでカスタム値の追加を選択し、スマートタグをパラメータキーとして追加します。リクエストボディの設定についても同様の手順を繰り返すことができます。
使用できるスマートタグの完全なリストについては、WPFormsで利用可能なすべてのスマートタグを確認してください。
これで完了です！WPFormsのWebhookアドオンの設定方法がわかりました。
次に、WPFormsをあるサイトから別のサイトに簡単に転送する方法をお探しですか？フォームのインポートとエクスポートの方法に関するチュートリアルをご覧ください。