Webhooks

Disponible sur : les plans Professional et Business

Formspree vous permet de configurer un webhook qui sera déclenché chaque fois qu’un formulaire reçoit une nouvelle soumission. Les webhooks peuvent être utilisés avec des fonctions serverless, du code serveur personnalisé ou d’autres services tiers pour effectuer un traitement personnalisé des soumissions de formulaire.

Les fonctions serverless offrent un moyen léger de traiter les soumissions de formulaire. Plutôt que de créer un serveur web complet uniquement pour traiter les soumissions, vous pouvez créer une seule fonction serverless et la déployer sur une plateforme serverless. Il existe plusieurs plateformes pour héberger des fonctions, telles que Cloudflare Workers, AWS Lambda et Google Cloud Functions. L’exemple ci-dessous utilise Cloudflare Workers, qui offre un généreux niveau gratuit et un chemin rapide du code à un endpoint déployé.

Lors de l’activation de votre plugin Webhook, vous serez invité à sélectionner un type de webhook : Simple Webhook, Build Hook ou REST Hook.

Webhooks simples

Ce sont des webhooks normaux. Nous enverrons simplement le contenu à l’URL souhaitée via des requêtes POST sans poser de questions.

Build Hooks

Ce sont des hooks pouvant être utilisés pour déclencher de nouveaux builds sur des services tiers comme Netlify. Il s’agit essentiellement d’un webhook avec un corps vide.

REST Hooks

Si vous en avez besoin, nous envoyons également des webhooks conformes au protocole REST Hooks. Ce protocole est pris en charge par certains services et implique un handshake lors de la création du webhook.

Gestion du handshake Resthook

Lorsque vous choisissez le protocole Resthook, avant que Formspree commence à envoyer des requêtes webhook, il enverra une requête de confirmation avec un en-tête X-Hook-Secret. Consultez la documentation resthooks sur la sécurité pour plus d’informations sur le handshake resthook.

Voici un exemple de gestion du handshake resthook dans un Cloudflare Worker, bien que les mêmes concepts s’appliquent si vous l’implémentez dans votre propre serveur web.

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 });
  },
};

À l’étape 1, le Worker répond au handshake resthook initial avec une réponse qui renvoie en miroir l’en-tête x-hook-secret de la requête. Le corps est vide.

L’étape 2 est l’endroit où va votre fonctionnalité personnalisée. Les Cloudflare Workers s’exécutent sur un isolat V8 avec l’API fetch standard et des liaisons pour KV, R2, D1 et les files d’attente — vous pouvez persister les soumissions, les transmettre à un autre service ou déclencher n’importe quelle action en aval. Consultez la documentation Cloudflare Workers pour les détails de déploiement et de liaison.

Contenu du webhook

Un webhook est envoyé pour chaque nouvelle soumission reçue.

À l’exception des Buildhooks (qui sont vides), le contenu des webhooks a la structure suivante :

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