Envoyer un formulaire à plusieurs adresses e-mail

Ajoutez chaque personne comme destinataire du formulaire dans le tableau de bord : les membres de l'espace de travail en les cochant, et les autres via un lien de confirmation, jusqu'à 10 adresses. Chacun reçoit sa propre copie de chaque soumission. Pour envoyer les questions commerciales à une personne et le support à une autre, aiguillez plutôt selon un champ dans un webhook.

Ce qui change ici

Les vieux scripts PHP et certains services de formulaires laissent le formulaire désigner ses propres destinataires, avec un champ masqué to ou cc. C'est pratique, et c'est aussi comme ça que les formulaires de contact deviennent des relais de spam : un bot change le champ masqué et votre serveur écrit à qui il veut, depuis votre domaine. Ikiform n'a pas de champ destinataire. Qui reçoit les e-mails se règle dans le tableau de bord, et toute personne extérieure à votre espace de travail doit d'abord confirmer.

Il reste donc deux besoins différents, qui se règlent à des endroits différents :

Envoyer chaque soumission à toute l'équipe

1. Ouvrez le formulaire dans le tableau de bord, puis Settings et Notifications. Vérifiez que Email new submissions est activé.
2. Cochez chaque membre de l'espace de travail qui doit recevoir les e-mails. Seuls les membres dont l'adresse est vérifiée sont listés.
3. Pour toute personne extérieure à l'espace de travail, saisissez son adresse sous Add someone outside the workspace et cliquez sur Send link. Vous pouvez en ajouter 5 par formulaire.
4. Demandez-leur de confirmer. D'ici là, leur ligne affiche Waiting for confirmation et ils ne reçoivent rien.

Les destinataires extérieurs voient les champs de la soumission et un lien de désinscription ; ils n'ont pas de lien vers le tableau de bord, puisqu'ils n'ont pas de compte. Les membres ont un bouton View submission. Si quelqu'un part, supprimez sa ligne ; s'il se désinscrit, sa ligne disparaît aussi.

Membres et adresses extérieures

Les deux types de destinataires se comportent différemment, ce qui compte pour décider qui ajouter où :

Donnez aux personnes qui répondent aux messages une place dans l'espace de travail, pour qu'elles voient les soumissions passées et le spam. Utilisez les adresses extérieures pour les personnes qui ont seulement besoin d'être informées, comme un responsable ou une boîte partagée.

Aiguiller chaque soumission selon le sujet

Les destinataires ne peuvent pas dépendre de ce que le visiteur a choisi. Pour cela, ajoutez un champ qui nomme l'équipe, et laissez un petit gestionnaire de webhook choisir l'adresse. Voici le formulaire :

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <label for="department">Who should read this?</label>
  <select id="department" name="department" required>
    <option value="sales">Sales</option>
    <option value="support">Support</option>
    <option value="billing">Billing</option>
  </select>

  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name" required />

  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Send</button>
</form>

Définissez department comme un champ select dans le tableau de bord, pour qu'un envoi ne puisse contenir que sales, support ou billing. Un bot qui envoie autre chose reçoit 422 validation_failed et n'atteint jamais votre gestionnaire.

Ensuite le gestionnaire. Il vérifie la signature, choisit l'équipe d'après department et envoie via votre propre fournisseur d'e-mail, ici Resend. Comme c'est vous qui envoyez l'e-mail, vous choisissez aussi son objet :

import { Resend } from "resend";
import { verifyWebhook, WebhookVerificationError } from "@ikiform/sdk/webhooks";

const resend = new Resend(process.env.RESEND_API_KEY);

const TEAMS: Record<string, string[]> = {
  sales: ["sales@example.com"],
  support: ["support@example.com", "oncall@example.com"],
  billing: ["accounts@example.com"],
};

export async function POST(request: Request) {
  const payload = await request.text();
  try {
    const event = await verifyWebhook({
      payload,
      headers: request.headers,
      secret: process.env.IKIFORM_WEBHOOK_SECRET!,
    });
    if (event.type !== "submission.created") return new Response(null, { status: 204 });

    const fields = event.data.fields;
    const department = String(fields.department ?? "support");
    const { error } = await resend.emails.send(
      {
        from: "Website <forms@example.com>",
        to: TEAMS[department] ?? TEAMS.support,
        replyTo: typeof fields.email === "string" ? fields.email : undefined,
        subject: `[${department}] ${String(fields.name ?? "New message")}`,
        text: Object.entries(fields)
          .map(([key, value]) => `${key}: ${String(value)}`)
          .join("\n"),
      },
      { idempotencyKey: event.id },
    );
    if (error) return new Response(error.message, { status: 502 });
    return new Response(null, { status: 204 });
  } catch (error) {
    if (error instanceof WebhookVerificationError) return new Response(error.reason, { status: 400 });
    throw error;
  }
}

• Les adresses sont dans votre code, pas dans le formulaire. Un visiteur choisit un nom d'équipe, jamais une adresse.
• replyTo fait que Reply pointe toujours vers le visiteur, comme le fait l'e-mail d'Ikiform.
• idempotencyKey: event.id fait qu'une livraison renvoyée n'envoie rien de nouveau. Ikiform renvoie une livraison qui ne reçoit pas de 2xx, avec le même id.
• Un 502 quand le fournisseur échoue indique à Ikiform de réessayer plus tard, donc une courte panne ne fait perdre aucun message.
• Les services inconnus ou absents retombent sur le support plutôt que de perdre le message.

Ajoutez l'URL sous Webhooks dans le tableau de bord et copiez son secret whsec_ dans IKIFORM_WEBHOOK_SECRET. La documentation des webhooks couvre les nouvelles tentatives et le payload. Vous préférez sans code ? Un flux Zapier ou n8n avec un filtre par service fait la même chose.

Gardez l'e-mail d'Ikiform activé pour une personne, en filet de sécurité, ou désactivez Email new submissions pour que personne ne reçoive le message deux fois.

Vérifiez que tout fonctionne

1. Vérifiez chaque ligne de destinataire dans les réglages Notifications du formulaire. Aucune ne doit afficher Waiting for confirmation.
2. Remplissez le formulaire sur votre page et envoyez-le. Vous arrivez sur votre page de remerciement, ou sur celle hébergée par Ikiform.
3. Chaque destinataire reçoit son propre e-mail. Demandez à l'un d'eux de regarder la ligne To : elle n'affiche que son adresse.
4. Si vous aiguillez par webhook, envoyez une fois par service et vérifiez le journal des livraisons sous Webhooks. Chacune affiche succeeded.
5. Envoyez avec le honeypot rempli, _gotcha=bot. L'envoi reçoit quand même une réponse de succès, mais la soumission est stockée comme spam et n'envoie ni e-mail ni webhook.

Pièges

• Ni CC ni CCI. Chaque destinataire reçoit un message séparé, il n'y a donc pas de fil commun. Convenez de qui répond, ou aiguillez selon le sujet.
• Le plafond compte les soumissions, pas les destinataires. Au-delà de 50 soumissions par heure sur un formulaire, chaque destinataire reçoit le récapitulatif à la place.
• Changements d'équipe. Quand quelqu'un quitte l'espace de travail, il cesse aussitôt de recevoir les e-mails. Vérifiez les destinataires du formulaire après un changement d'équipe, pour qu'il n'écrive pas à personne.
• Une adresse en erreur est suspendue. La ligne affiche Emails bounced avec une date, et les e-mails reprennent après celle-ci. Corrigez l'adresse ou supprimez-la.
• Rien ne part vers le visiteur. Ikiform n'envoie pas d'e-mail à la personne qui remplit le formulaire. Les e-mails de notification vont uniquement à vous et à votre équipe : il n'y a donc ni réponse automatique, ni e-mail de confirmation, ni double opt-in. Envoyez-les depuis votre outil d'e-mailing, déclenché par un webhook.

Questions