# Webhooks

> Formspree Docs · プラグイン · 2026年2月28日

#### 対応プラン: Professional、Business

Formspreeでは、フォームに新しい送信があるたびにトリガーされるWebhookを設定できます。Webhookは、サーバーレス関数、カスタムサーバーコード、またはその他のサードパーティサービスと組み合わせて使用し、フォームの送信に対するカスタム処理を行うことができます。

サーバーレス関数は、フォーム送信を処理する軽量な方法を提供します。フォームの送信を処理するためだけにフルのウェブサーバーを作成する代わりに、単一のサーバーレス関数を作成してサーバーレスプラットフォームにデプロイできます。[Cloudflare Workers](https://developers.cloudflare.com/workers/)、[AWS Lambda](https://aws.amazon.com/lambda/)、[Google Cloud Functions](https://cloud.google.com/functions/)など、関数のホスティングプラットフォームはいくつかあります。以下の例ではCloudflare Workersを使用します。これは寛大な無料枠とコードからデプロイ済みエンドポイントまでの迅速なパスを提供します。

WebhookプラグインをするときPlug機能を有効にすると、Webhookのタイプとして**シンプルWebhook**、**ビルドフック**、**RESTフック**のいずれかを選択するよう求められます。

## シンプルWebhook

これは通常のWebhookです。特別な質問をすることなく、指定されたURLにPOSTリクエストとしてペイロードを送信します。

## ビルドフック

[Netlify](https://www.netlify.com/docs/webhooks/#incoming-webhooks)などのサードパーティサービスで新しいビルドをトリガーするために使用できるフックです。これは基本的に空のボディを持つWebhookです。

## RESTフック

<div class="callout callout-warning">
  <div><strong>注意:</strong> RESTフックプロトコルは公式に廃止されており、現在積極的にメンテナンスされている仕様ではありません。Formspreeは既存の統合との後方互換性のためにサポートを継続していますが、新しい統合では<strong>シンプルWebhook</strong>の使用をお勧めします。</div>
</div>

必要な場合に備えて、[RESTフック](http://resthooks.org/)プロトコルに準拠したWebhookも送信しています。これは一部のサービスでサポートされており、Webhookの作成時にハンドシェイクが行われます。

### RESTフックのハンドシェイク処理

RESTフックプロトコルを選択すると、Formspreeがwebhookリクエストの送信を開始する前に、`X-Hook-Secret`ヘッダーを含む確認リクエストを送信します。RESTフックのハンドシェイクに関するセキュリティの詳細については、[RESTフックのドキュメント](http://resthooks.org/docs/security/)をご覧ください。

以下は[Cloudflare Worker](https://developers.cloudflare.com/workers/get-started/guide/)でRESTフックのハンドシェイクを処理する例です。独自のウェブサーバーで実装する場合も同じ概念が適用されます。

```javascript
export default {
  async fetch(request) {
    const url = new URL(request.url);
    if (url.pathname !== '/hook') {
      return new Response(url.pathname + '\n');
    }

    const hookSecret = request.headers.get('x-hook-secret');
    if (hookSecret) {
      // Step 1: Confirm the subscription. This request includes an
      // X-Hook-Secret header, and we echo it back to complete the
      // handshake.
      return new Response(null, {
        headers: { 'x-hook-secret': hookSecret },
      });
    }

    // Step 2: Receive webhook requests — do something with the payload!
    const payload = await request.json();
    console.log('Received webhook!', payload);
    return new Response(null, { status: 200 });
  },
};
```

上記のStep 1では、WorkerがRESTフックの初期ハンドシェイクに対して、リクエストの`x-hook-secret`ヘッダーをそのままレスポンスに返します。ボディは空です。

Step 2はカスタム機能を実装する部分です。Cloudflare WorkersはV8アイソレート上で動作し、標準の`fetch` APIとKV、R2、D1、キューのバインディングを備えています。送信データの保存、別のサービスへの転送、下流のアクションのトリガーなどがここから行えます。デプロイとバインディングの詳細については[Cloudflare Workersのドキュメント](https://developers.cloudflare.com/workers/)をご覧ください。

## Webhookのペイロード

Webhookは新しい送信を受け取るたびに送信されます。

ビルドフック（ボディが空）を除いて、Webhookのペイロードは以下の構造を持ちます:

```json
{
  "form": "",
  "keys": ["keys", "in", "the", "order", "they", "were", "submitted"],
  "submission": {
    "_date": "2029-12-31T00:00:00",
    "field": "value",
    "other-fields": "other value"
  }
}
```