AI要約
WPFormsには約40のサービスのアドオンがあります。Mailchimp、Salesforce、Stripe、Google Sheets、その他の一般的なサービスは、1つのセットアップ画面で接続できます。クライアントの社内予約システムはそうではありません。
Webhooksアドオンは、そのギャップを埋めます。フォーム送信を受け取り、指定したURLにHTTPリクエストとして、受信APIが期待する形式で送信します。このチュートリアルでは、エンドポイントの詳細の取得、フィールドのマッピング、認証の追加、実際の送信に依存する前のテストについて説明します。
Webhooksを使用してWordPressフォームデータを任意のAPIに送信する方法
訪問者がフォームを送信します。WPFormsは、APIが要求する形式で回答をHTTPリクエストに整形し、認証ヘッダーを追加して送信します。どちらの場合も、エントリーはWordPressに保存されます。
Webhooksが適切なツールとなる場合
まずネイティブアドオンを確認してください。Mailchimp、Salesforce、Google Sheets、Notion、Airtableなど約40のサービスが数回のクリックで接続でき、それらの接続はより深く機能します。Zapier、Make、n8nは、タスクごとのコストとチェーンに追加されるもう1つのアカウントで、SaaSアプリのロングテールをカバーします。
Webhooksは、RESTful API（プロプライエタリな内部システム、地域サービス、クライアントのカスタムバックエンド、自作のエンドポイントなど）のためにあります。転送上限もないため、月に4,000件の送信を受け取るフォームと40件のフォームの料金は同じです。
必要なもの
- WPForms Elite（Webhooksアドオンはこのライセンスレベルに含まれています）
- サイト上のフォーム
- 受信APIのドキュメント
コードを書く必要はありません。すべてフォームビルダー内で完結します。
ステップ1：APIから詳細を取得する
このステップをスキップすることが、ほとんどのWebhookが初回で失敗する理由です。APIドキュメントから、以下を書き留めてください。
- エンドポイントURL。例：
https://api.example.com/v1/deliveries - リクエストメソッド。通常はレコード作成のためのPOSTです。
- 認証方法。通常はヘッダー内のキーです。例：
Authorization: Bearer YOUR_KEY - 正確なパラメータ名。APIが
customer_emailを期待しているのにemailを送信した場合、リクエストは成功しますが、値は消えてしまいます。
実行例：配達システムがPOST経由でそのエンドポイントで新規注文を受け付け、customer_name、customer_email、customer_phone、arrangement、quantity、order_totalを期待する花屋のクライアント。それに対応するWordPressプラグインは存在しないため、Webhookが必要になります。
ステップ2：アドオンをインストールして有効にする
WPForms » Addonsに移動し、Webhooksを検索してInstall Addonをクリックします。自動的に有効化されます。
次にフォームを開き、Settings » Webhooksをクリックして、Enable Webhooksをオンにします。
後で認識しやすいように、鉛筆アイコンをクリックして「Dispatch API」などの名前に変更します。
ステップ3：リクエストURL、メソッド、フォーマットを設定する
次に、これらの設定を構成します。
Request URL。エンドポイントを貼り付けます。/v1/と/v2/は混同しやすいため、バージョン部分に注意してください。
Request Method。GET、POST、PUT、PATCH、またはDELETE。POSTは新しいレコードを作成し、ほとんどの設定をカバーします。
Request Format。JSONはapplication/jsonを送信し、ほとんどの最新APIに適しています。FORMはapplication/x-www-form-urlencodedを送信するため、ドキュメントで要求された場合にのみ使用してください。不明な場合はJSONを使用してください。
ステップ4：認証ヘッダーを追加する
最後に、認証ヘッダーを追加します。
Request Headersにはキー/値のペアを入力します。ベアラートークンの場合は、キーとしてAuthorization、値としてBearer YOUR_TOKENを使用します。カスタムヘッダーの場合は、ドキュメントで指定された名前（例：X-API-Key）を使用します。必要なだけ行を追加してください。
Secretフィールドは逆の方法で機能し、WPFormsが自動的に入力します。これにより、送信される各リクエストに署名され、受信サーバーはデータが本当にサイトから送信されたことを確認できます。エンドポイントを制御でき、署名を確認できる場合に使用します。ほとんどのサードパーティAPIでは無視されます。
ヘッダー値は、それが資格情報であるかのように扱ってください。ビルダーへのアクセス権を持つ人なら誰でも読み取ることができるため、クライアントAPIキーは狭くスコープし、プロジェクトから外れる人が出たときにローテーションしてください。
ステップ5：フォームフィールドをマッピングする
リクエストボディは、フォームとAPIが出会う場所です。各行は、入力するパラメータ名と選択するフォームフィールドをペアにします。
customer_name→ 名前customer_email→ メールアドレスcustomer_phone→ 電話番号arrangement→ アレンジメントquantity→ 数量order_total→ 合計
キー名はドキュメントからそのままコピーします。大文字と小文字、アンダースコアは重要であり、不一致があると値がドロップされたままリクエストは成功します。
チェックボックス、複数選択、住所フィールドは、二重パイプ（||）で区切られた値を送信するため、APIが配列を必要とする場合はサーバー側で分割してください。
静的なsourceパラメータや、エントリIDのスマートタグなど、フォームフィールド以外のものを送信するには、カスタム値の追加を選択します。
ステップ6：条件付きロジックを追加する（オプション）
条件付きロジックを有効にするを切り替えて、ウェブフックがいつトリガーされるかを制御します。ディスパッチAPIに送信するのは1つのアレンジメントタイプのみにするか、配信が全く必要ない注文は保留にする場合があります。2つの宛先がある場合は、新しいウェブフックを追加をクリックし、それぞれに独自のルールを与えます。
ステップ7：本番稼働前にテストする
2段階でテストします。
まず、リクエストインスペクターに送信します。Webhook.siteやRequestBinは、到着したものを正確に表示する一時的なURLを生成します。それをリクエストURLに貼り付けて保存し、フォームを送信します。ヘッダーとペイロードはすぐに表示されるため、キー名が正しいかどうかを確認できます。
次に、実際のエンドポイントに切り替えて再度送信し、レコードが着陸したことを確認します。WPForms » Entriesも確認してください。
行き詰まった場合は、WPForms » Tools » Logsに移動し、ログを有効にするを切り替えて、ログタイプの[Providers]と[Errors]を確認します。再度送信すると、ログにAPIの応答が表示されます。これらのエントリにはサーバーに置きたくないデータが含まれる可能性があるため、後で必ずロギングをオフに戻してください。
一般的なWebhooksエラー
- 401または403。認証：キーが間違っている、キーが期限切れ、
Bearerプレフィックスが欠落している、またはヘッダー名が間違っている。 - 404。URL：タイポ、バージョンセグメントの欠落、またはAPIが拒否する末尾のスラッシュ。
- 400または422。APIはリクエストを受け取りましたが、通常は必須パラメータの欠落や解析不可能な日付により、コンテンツを拒否しました。
- 200だが何も表示されない。キー名の不一致：APIはリクエストを受け入れましたが、認識できないフィールドは無視しました。
- 何もトリガーされない。条件付きロジックを確認します：マルチページフォームでは、ウェブフックは最終送信後に1回実行されます。
WordPressフォームデータをAPIに送信することに関するFAQ
どのWPFormsプランにWebhooksアドオンが含まれていますか？
Elite。そのティアは、Salesforce、Authorize.Net、ActiveCampaign、Airtableもカバーしているため、カスタム統合作業を行うエージェンシーが通常利用する場所です。
Webhooksを使用するにはコーディングの知識が必要ですか？
いいえ。すべてWPFormsビルダー内で行われます。APIのドキュメントを十分に読み、URL、認証方法、パラメータ名を見つけるだけで済みます。
ウェブフックとZapierまたはMakeアドオンの違いは何ですか？
ZapierとMakeはフォームと連携先の間に位置し、タスクごとのコストでマルチステップワークフローと豊富な連携機能を提供します。Webhookはエンドポイントに直接送信され、あらゆるAPIと連携し、送信回数を制限しません。
1つのフォームから複数のAPIにデータを送信できますか？
はい。「新規Webhooksを追加」をクリックし、独自のURL、ヘッダー、マッピングで2番目の接続を設定します。それぞれが独自の条件付きロジックを持つことができます。
APIキーをフォームデータと共に送信するにはどうすればよいですか？
リクエストヘッダーにキー/値のペアとして追加します。ほとんどのAPIではAuthorizationとBearer YOUR_KEYを要求しますが、一部のAPIではX-API-Keyのようなカスタム名を使用します。
誰かがフォームを送信したときにAPIがダウンしていた場合はどうなりますか？
Webhooksは個別のリクエストであるため、送信は完了し、エントリーと通知は送信されます。Webhooksのみが失敗するため、ビジネス上重要なものについては受信側で監視を追加してください。
次に、送信を自動的に適切な場所にルーティングします
API連携が機能したら、次にそれをルーティングする部分です。これにより、見積もり依頼、サポートに関する質問、ニュースレター登録などがそれぞれ別の場所に送信されます。回答に基づいてフォーム送信を異なるリストやツールにルーティングする方法に手順が記載されています。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。
