Ein Formular an mehrere E-Mail-Adressen senden

Füge jede Person im Dashboard als Empfänger des Formulars hinzu: Workspace-Mitglieder per Häkchen und alle anderen per Bestätigungslink, bis zu 10 Adressen. Jede Person bekommt ihre eigene Kopie jeder Einsendung. Um Vertriebsfragen an eine Person und Support an eine andere zu schicken, leite stattdessen in einem Webhook anhand eines Felds weiter.

Was hier anders ist

Alte PHP-Skripte und manche Formulardienste lassen das Formular seine Empfänger selbst angeben, mit einem versteckten Feld to oder cc. Das ist bequem, und genau so werden Kontaktformulare zu Spam-Relays: Ein Bot ändert das versteckte Feld, und dein Server mailt, an wen er will, von deiner Domain. Ikiform hat kein Empfängerfeld. Wer E-Mails bekommt, wird im Dashboard festgelegt, und jeder außerhalb deines Workspace muss zuerst bestätigen.

Bleiben zwei verschiedene Aufgaben, die an verschiedenen Stellen gelöst werden:

Jede Einsendung an das ganze Team senden

1. Öffne das Formular im Dashboard, dann Settings und Notifications. Stell sicher, dass Email new submissions an ist.
2. Hake jedes Workspace-Mitglied an, das E-Mails bekommen soll. Nur Mitglieder mit verifizierter Adresse werden aufgeführt.
3. Für alle außerhalb des Workspace gib ihre Adresse unter Add someone outside the workspace ein und klick auf Send link. Du kannst 5 pro Formular hinzufügen.
4. Bitte sie, zu bestätigen. Bis dahin steht in ihrer Zeile Waiting for confirmation, und sie bekommen nichts.

Externe Empfänger sehen die Felder der Einsendung und einen Abmeldelink; einen Dashboard-Link bekommen sie nicht, weil sie kein Konto haben. Mitglieder bekommen einen Button View submission. Wenn jemand geht, entferne seine Zeile; wenn sich jemand abmeldet, verschwindet seine Zeile ebenfalls.

Mitglieder und externe Adressen

Die beiden Arten von Empfängern verhalten sich unterschiedlich, was zählt, wenn du entscheidest, wen du wo hinzufügst:

Gib den Leuten, die Nachrichten beantworten, einen Platz im Workspace, damit sie frühere Einsendungen und Spam sehen können. Nutze externe Adressen für Leute, die nur Bescheid wissen müssen, etwa eine Vorgesetzte oder ein gemeinsames Postfach.

Jede Einsendung nach Thema weiterleiten

Empfänger können nicht davon abhängen, was der Besucher ausgewählt hat. Füge dafür ein Feld hinzu, das das Team nennt, und lass einen kleinen Webhook-Handler die Adresse wählen. Hier das Formular:

<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>

Definiere department im Dashboard als select-Feld, damit ein Post nur sales, support oder billing enthalten kann. Ein Bot, der etwas anderes sendet, bekommt 422 validation_failed und erreicht deinen Handler nie.

Dann der Handler. Er verifiziert die Signatur, wählt das Team anhand von department und sendet über deinen eigenen E-Mail-Anbieter, hier Resend. Weil du die E-Mail selbst sendest, wählst du auch ihren Betreff:

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

• Die Adressen stehen in deinem Code, nicht im Formular. Ein Besucher wählt einen Teamnamen, nie eine Adresse.
• replyTo lässt Reply weiterhin auf den Besucher zeigen, wie es die E-Mail von Ikiform selbst tut.
• idempotencyKey: event.id sorgt dafür, dass eine wiederholte Zustellung nichts Neues sendet. Ikiform wiederholt eine Zustellung, die kein 2xx bekommt, mit derselben ID.
• Ein 502, wenn der Anbieter scheitert, sagt Ikiform, es später erneut zu versuchen, sodass ein kurzer Ausfall keine Nachricht verliert.
• Unbekannte oder fehlende Abteilungen fallen auf den Support zurück, statt die Nachricht zu verwerfen.

Füge die URL unter Webhooks im Dashboard hinzu und kopiere ihr whsec_-Secret in IKIFORM_WEBHOOK_SECRET. Die Webhook-Dokumentation behandelt Wiederholungsversuche und die Payload. Lieber ohne Code? Ein Flow in Zapier oder n8n mit einem Filter pro Abteilung macht dasselbe.

Lass die E-Mail von Ikiform für eine Person als Absicherung an oder schalte Email new submissions aus, damit niemand die Nachricht doppelt bekommt.

Prüfen, ob es funktioniert

1. Prüfe jede Empfängerzeile in den Einstellungen Notifications des Formulars. Keine sollte Waiting for confirmation zeigen.
2. Füll das Formular auf deiner Seite aus und sende es ab. Du landest auf deiner Dankeseite oder der gehosteten von Ikiform.
3. Jeder Empfänger bekommt seine eigene E-Mail. Bitte einen davon, die Zeile To zu prüfen: Sie zeigt nur seine Adresse.
4. Wenn du per Webhook weiterleitest, sende einmal pro Abteilung ab und prüfe das Zustellungsprotokoll unter Webhooks. Jede Zustellung zeigt succeeded.
5. Sende einen Post mit ausgefülltem Honeypot, _gotcha=bot. Er bekommt trotzdem eine Erfolgsantwort, aber die Einsendung wird als Spam gespeichert und löst weder E-Mail noch Webhook aus.

Stolperfallen

• Kein CC oder BCC. Jeder Empfänger bekommt eine separate Nachricht, es gibt also keinen gemeinsamen Verlauf. Sprecht ab, wer antwortet, oder leitet nach Thema weiter.
• Die Grenze zählt Einsendungen, nicht Empfänger. Ab 50 Einsendungen pro Stunde an ein Formular bekommt jeder Empfänger stattdessen die Sammel-E-Mail.
• Änderungen bei Mitgliedern. Wenn jemand den Workspace verlässt, bekommt er sofort keine E-Mails mehr. Prüfe nach einem Teamwechsel die Empfänger des Formulars, damit das Formular nicht am Ende an niemanden mailt.
• Eine gebouncte Adresse wird pausiert. Die Zeile zeigt Emails bounced mit einem Datum, und danach werden wieder E-Mails an sie gesendet. Korrigiere die Adresse oder entferne sie.
• Nichts geht an den Besucher. Ikiform schickt der Person, die das Formular ausfüllt, keine E-Mail. Benachrichtigungs-E-Mails gehen nur an dich und dein Team, es gibt also keinen Autoresponder, keine Bestätigungs-E-Mail und kein Double-Opt-in. Verschicke sie aus deinem E-Mail-Tool, ausgelöst durch einen Webhook.

Fragen