WordPressのフォームからサードパーティのアプリやプラグインにデータを送信したいですか？WPForms Webhooksアドオンを使えば、フォームをセカンダリサービスに接続できます。
このチュートリアルでは、WPhooksアドオンをWPFormsにインストールして使用する方法を紹介します。
必要条件
- Webhooksアドオンにアクセスするには、Eliteライセンスレベルが必要です。
- Webhooksアドオンに必要な最低バージョンを満たすために、WPFormsの最新バージョンがインストールされていることを確認してください。
ウェブフックとは何か？
Webhook を使うと、フォームの情報を WordPress サイト外のサービスやツールに自動的に送信することができます。これは特に統合が必要な場合に便利ですが、まだ利用可能なアドオンがありません。
ウェブフックを設定する最も初心者向けの方法は、Zapierアドオンを使うことです。Zapier はウィザード形式のセットアップで、フォームを別のサービスに接続するために必要なすべてのステップを順を追って説明してくれるので、すべてのユーザーレベルに最適です。
もう1つのオプションは、Uncanny Automatorとの統合です。この機能は、サポートされているアプリやサービス間の接続を可能にします。
より高度なユーザーには、Webhooksアドオンがコネクタサービスなしで同様の機能を提供します。しかし、トレードオフとして、セットアッププロセスはより技術的です。
Webhooksアドオンのインストール
始める前に、まずWPFormsがあなたのWordPressサイトにインストールされ、有効になっていることを確認する必要があります。
WPFormsがインストールされ、ライセンスが認証されると、Webhooksアドオンを素早くインストールして有効化することができます。
ウェブフックの設定
インストールが完了したら、Webhookを設定する準備ができました。まずは新しいフォームを作成するか、既存のフォームを編集してください。
フォームビルダーを開いた後、設定 " Webhooks で Webhook を有効にすることができます。ここから、Webhooks を有効にするオプションをオンに切り替えます。
Webhookの名前など、設定できる項目が増えます。
デフォルトでは、新しいウェブフックは無名です。Webhookの名前を編集または追加したい場合は、鉛筆アイコンをクリックしてください。
また、さらにWebhookを追加したい場合は、「Add New Webhook」と書かれたボタンをクリックし、追加の接続ごとに設定を入力することができます。
Webhookの名前の下に、この接続で利用可能なすべての設定が表示されます。各設定が何をするのか、以下に説明します。
リクエストURL
リクエストURLはWPFormsをセカンダリアプリに接続するために使用されます。このURLは通常、基本的な接続を設定した後にサービスやツールのAPIから取得できます。
リクエスト方法
Request Method では、Webhook リクエストの実行時に使用する HTTP メソッドを選択できます。
どのようなコネクションを作りたいかによって、いくつかの方法から選ぶことができる：
- GET：GETメソッドは、送信されたフォームから情報を取得し、接続されているアプリに詳細を送信します。
- POST：POSTメソッドはWPFormsを通して送信された情報を受け取り、セカンダリサービスに送信します。
- PUT：PUT メソッドを使用すると、Webhook の実行時にデータを更新できます。
- PATCH：PATCH メソッドを使用すると、Webhook の実行時にデータを置き換えることができます。
- DELETE: DELETE メソッドは、この特定のウェブフックの実行時に情報を削除することができます。
リクエスト形式
Request Formatは、Webhookを通じて送信されるデータのタイプをサーバーに伝えます。また、Content-Typeヘッダーの値も設定されます。
リクエストフォーマットには2種類あります：
- JSON:JSON メソッドは、データを
application/jsonフォーマットで、コンテンツ・タイプをcharset=utf-8. - フォーム:FORM メソッドは、データを
application/x-www-form-urlencodedフォーマットで、コンテンツ・タイプをcharset=utf-8.
注:データは通常JSON形式で送信されます。この方がサーバーサイドでの変更（検証、フォーマット、サニタイズの変更を含む）が容易になるからです。
シークレット
シークレットキーは、完了したリクエストごとにハッシュ（または一意のID）を生成します。これは HTTP リクエストの発信元を検証するための署名として機能し、常にリクエストヘッダで提供されます。
注意:ほとんどの場合、サードパーティのサービスとフォームを統合する場合は、Secret設定に入力する必要はありません。シークレット設定は、リクエストの送信元を確認する方法として、独自の API と統合する開発者向けに用意されています。
リクエスト・ヘッダ
リクエストヘッダでは、Webhookリクエストで送信するHTTPヘッダのキーと値を定義できます。
注意:この設定は、認証リクエスト用のHTTPヘッダーにAPIキーを渡そうとしている場合に特に便利です。WPFormsのHidden Fieldを使用することで、独自のAPIキーを入力することができます。
リクエスト・ボディ
リクエストヘッダと同様に、リクエストボディの設定では、Webhook のリクエストボディで送信されるキーと値を定義できます。
注：アドレス、ドロップダウン、チェックボックスなどのフィールドで複数の値を区切るために、WPFormsは2つの垂直スラッシュを使用します（||のように）。
例Webhooksを使ってWPFormsとSlackを接続する
注意: より使いやすいSlackとの統合には、より簡単なセットアップとより多くの機能を提供する専用のSlackアドオンの使用をお勧めします。詳しくはSlackアドオンガイドをご覧ください。
例として、Webhookを使用してWPFormsをSlackアカウントに接続する方法を説明します。
注：この例では、単一のフォームフィールドをSlackに送信する方法を説明します。複数のフィールドをSlackに送信したい場合は、開発者向けドキュメントを参照してください。
Slackアプリの作成
まず、SlackのAPIページに移動する必要がある。そしてCreate an Appボタンをクリックする。
オーバーレイが開きますので、アプリの設定方法を選択してください。From scratchオプションを選択します。
アプリの名前を決め、フォームデータを送信するワークスペースを選択します。この例では、アプリ名を「Contact Sullie」とします。アプリの作成ボタンをクリックして次に進みます。
アプリの基本情報が表示されます。Add features and functionalitysettingsまでスクロールダウンし、Incoming Webhooksオプションを有効にします。
Incoming Webhooks設定を有効にしたら、Activate Incoming WebhooksオプションをOnに切り替えます。これにより、ページのさらに下に詳細が表示されます。
ワークスペースの Webhook URL] セクションの下にある [Add New Webhook to Workspace] ボタンをクリックします。
別のオーバーレイにリダイレクトされるので、そこでメッセージを送信するSlackチャンネルを選択する必要があります。ドロップダウンからチャンネルを選択し、Allowをクリックします。
これで前のページに戻ります。ワークスペースのWebhook URLsセクションに新しいURLが表示されます。次のステップで使用するので、このURLをコピーしてください。
後でこのエリアの情報が必要になるので、必ずこのブラウザのタブかウィンドウを開いておいてください。
フォームにSlack Webhookを追加する
次に、Webhook を使用するフォームを開く必要があります。まだの場合は、WPForms でWebhooks アドオンを設定してください。
フォームのウェブフックを有効にしたら、SlackからコピーしたURLをリクエストURLフィールドに貼り付け、フォームとSlackのAPIを接続します。
次に、残りのウェブフック設定を行います。この例で設定したすべての設定を以下に並べました：
- リクエストメソッド：フォームからSlackにデータを送信するので、Request MethodをPOSTオプションに設定します。
- リクエスト・フォーマット：リクエストフォーマットを標準のJSONに設定する。
- シークレット：この例では、シークレットフィールドを空白のままにしておき、ウェブフックの実行時に自動生成されるようにします。もしあなたが開発者で、独自のシークレット値を入力したい場合は、ここで入力できます。
- リクエストヘッダー：リクエストと一緒に送信する必要のある特定の値はないので、Request Headersの設定は空白のままにしておきます。Webhookが実行されると、自動生成されたSecretがここに置かれます。
- リクエスト・ボディ
- キーフォームはプレーンテキストで情報を送信するため、Request Body parameter keyフィールドにテキストを入力してください。このフィールドにテキストを入力しないと、接続エラーが発生する可能性があります。
- フィールドを選択：Select Fieldの設定には、データを送信したいフィールドの名前を指定する。この例では、CommentまたはMessageフィールドのデータをSlackに送信する。
フォームビルダーを離れる前に変更を保存することを忘れないでください。また、Webhook を設定したら、フォームが正しく動作しているかテストすることをお勧めします。
条件ロジックの追加（オプション）
条件付きロジックを使うと、フォームでのユーザーの選択に基づいてアクションを実行するかどうかを選択できます。
例として、ユーザーが "Help "という単語を含むメッセージをコンタクトフォームに送信した場合、Slackにメッセージを送信する条件付きロジックの使い方を紹介します。
この設定を行うには、フォームに「1行テキスト」または「段落テキスト」フィールドがあることを確認する必要があります。この例では、段落テキストフィールドを追加します。
次に、メッセージ入力フィールドのラベルを調整する必要があります。この例では、「コメント」または「メッセージ」というラベルを追加します。
次に、条件付きロジックを設定する必要があります。Slack webhookの設定の一番下にあるEnable Conditional Logicというオプションをオンにすると、ルールを作成するためのドロップダウンが表示されます。
次に、条件ロジックのルールを追加します。この例では、CommentかMessageにhelpが含まれる場合にこのWebhookを送信するようにドロップダウンを設定します。
注:条件付きロジックルールの設定にヘルプが必要ですか?WPFormsで条件付きロジックを使うための初心者向けチュートリアルに詳細があります。
いつものように、ビルダーを離れる前にフォームを保存することを忘れないでください。
よくある質問
これらは、Webhooksアドオンに関連するよくある質問です。
リクエスト・ヘッダーとリクエスト・ボディでスマート・タグを使用するにはどうすればよいですか？
スマートタグを使用して、フォームのリクエストヘッダとリクエストボディに動的に情報を挿入することができます。
スマートタグを使用するには、Webhookの設定からリクエストヘッダーのドロップダウンからカスタム値の追加を 選択し、パラメータキーとしてスマートタグを追加します。リクエストボディの設定も同じ手順を繰り返します。
使用可能なスマートタグの完全なリストについては、WPFormsで使用可能なすべてのスマートタグを確認してください。
以上です！これでWPhooksアドオンの設定方法がわかりました。
次に、WPFormsをサイト間で簡単に移行する方法をお探しですか？フォームをインポート、エクスポートする方法のチュートリアルをご覧ください。