Eventanmeldung ohne Eventbrite, für kostenlose Community-Events

Für ein kostenloses Event kann ein Anmeldeformular auf deiner eigenen Site die Anmeldung über Eventbrite ersetzen: Es sendet an Ikiform, das jede Anmeldung speichert und dein Team per E-Mail informiert. Füge einen Webhook hinzu, der die Bestätigungs-E-Mail über deinen eigenen E-Mail-Anbieter verschickt, und zähle die Plätze pro Session anhand der neuesten Anmeldung pro E-Mail-Adresse. Behalte Eventbrite oder eine andere Ticketing-Plattform für bezahlte Tickets, harte Kapazitätsgrenzen und Check-in per Scan.

Was ohne Ticketing-Plattform anders ist

Eventbrite erledigt fünf Aufgaben auf einmal, und man vergisst leicht die, die du jetzt selbst übernimmst. Für einen kostenlosen Community-Tag, eine Meetup-Reihe oder einen Workshop sind die meisten davon klein. Hier die ehrliche Aufteilung:

Die Preise von Eventbrite ändern sich, also sieh auf der eigenen Preisseite nach, bevor du Kosten vergleichst. Bei kostenlosen Events sind Gebühren meist nicht der Grund zu wechseln: Die Teilnehmerliste liegt auf der Plattform eines anderen, die Seite sieht aus wie deren Seite, und wer sich anmeldet, gibt seine Daten an ein weiteres Unternehmen mit eigenen Konto- und E-Mail-Einstellungen. Bei kostenpflichtigen Events bleib dabei. Ikiform hat keine Zahlungen.

Ein Anmeldeformular mit Sessionwahl

Ein Community-Tag hat oft parallele Sessions, und Räume sind unterschiedlich groß. Frag, welche Sessions die Leute besuchen wollen, damit du einen beliebten Workshop vorher in einen größeren Raum verlegen kannst. Diese Definition begrenzt die Auswahl auf drei von vier, weil zwei gleichzeitig laufen:

• name ist für das Namensschild beschriftet, so bekommst du den Namen, mit dem die Leute angesprochen werden wollen.
• lunch ist ein radio mit einer Option No lunch, damit du für die Leute bestellst, die auch essen.
• updates ist eine nicht angehakte Checkbox, gespeichert als true oder false in einer Einsendung, die ihr eigenes created_at behält. Nimm Leute nur in deinen Newsletter auf, wenn der Wert true ist.
• Nutze das RSVP-Formular aus der Hauptanleitung für das Markup in deinem Stack und setze diese Felder ein.

Die Bestätigung aus deinem eigenen E-Mail-Tool senden

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. Bei einem Event solltest du trotzdem eine schicken: Leute leiten die Bestätigung an ihre Vorgesetzten weiter und suchen am Morgen des Events danach. Dieser Route-Handler empfängt den signierten Webhook von Ikiform und verschickt die E-Mail über die API von Resend. Jeder Anbieter mit einem Sende-Endpunkt funktioniert genauso.

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

const TITLES: Record<string, string> = {
  keynote: "Opening talk, 10:00",
  workshop_a: "Workshop A, 11:30",
  workshop_b: "Workshop B, 11:30",
  panel: "Closing panel, 15:00",
};

function escape(text: string) {
  return text.replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);
}

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 email = String(fields.email ?? "");
    const chosen = (Array.isArray(fields.sessions) ? fields.sessions : []).map((id) => TITLES[String(id)] ?? String(id));
    const response = await fetch("https://api.resend.com/emails", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.RESEND_API_KEY}`,
        "Content-Type": "application/json",
        "Idempotency-Key": request.headers.get("webhook-id") ?? event.data.submission_id,
      },
      body: JSON.stringify({
        from: "Community Day <hello@community.example>",
        to: email,
        reply_to: "hello@community.example",
        subject: "You're registered for Community Day, 14 March",
        html: [
          `<p>Hi ${escape(String(fields.name ?? ""))},</p>`,
          "<p>You're on the list for Community Day on 14 March at The Old Library. Doors open at 9:30.</p>",
          `<p>Your sessions: ${chosen.map(escape).join(", ")}.</p>`,
          '<p><a href="https://community.example/day.ics">Add it to your calendar</a>. Can\'t come after all? Reply to this email.</p>',
        ].join(""),
      }),
    });
    if (!response.ok) return new Response(`Email API answered ${response.status}`, { status: 502 });
    return new Response(null, { status: 204 });
  } catch (error) {
    if (error instanceof WebhookVerificationError) return new Response(error.reason, { status: 400 });
    throw error;
  }
}

• verifyWebhook prüft die Signatur, damit niemand sonst deine Domain E-Mails verschicken lassen kann.
• Idempotency-Key verwendet die webhook-id der Zustellung, die bei jedem automatischen Wiederholungsversuch und bei einem manuellen Retry einer fehlgeschlagenen Zustellung gleich bleibt, sodass eine Zustellung, deren Antwort verloren ging, keine zweite E-Mail auslöst.
• Name und Session-Titel werden escaped, bevor sie ins HTML kommen. Behandle Feldwerte als nicht vertrauenswürdige Eingaben.
• Ein 502 bringt Ikiform dazu, es erneut zu versuchen, sodass ein kurzer Ausfall beim E-Mail-Anbieter keine Bestätigung verliert. Spam löst den Webhook nie aus, Bots bringen dich also nicht dazu, Fremden E-Mails zu schicken.

Füge die Route unter Webhooks im Dashboard hinzu und kopiere ihr Secret in IKIFORM_WEBHOOK_SECRET. Ikiform wiederholt eine fehlgeschlagene Zustellung etwa 3 Tage lang, und das Zustellungsprotokoll zeigt jeden Versuch. Ohne Code kann ein Automatisierungstool wie Zapier oder Make dieselbe E-Mail senden.

Plätze pro Session

Ikiform stoppt die Anmeldungen für eine Session nicht, wenn ihr Raum voll ist, und kann eine volle Option nicht ausblenden. Zähle stattdessen, anhand der neuesten Anmeldung jeder Person, und führe das aus, wann immer du eine Zahl brauchst:

import { createClient } from "@ikiform/sdk";

const ikiform = createClient({ apiKey: process.env.IKIFORM_SECRET_KEY! });
const ROOMS: Record<string, number> = { keynote: 200, workshop_a: 30, workshop_b: 30, panel: 200 };
const latest = new Map<string, string[]>();

for await (const submission of ikiform.submissions.iterate({ formId: process.argv[2], status: "received", limit: 100 })) {
  const email = String(submission.fields.email ?? "").trim().toLowerCase();
  const chosen = Array.isArray(submission.fields.sessions) ? submission.fields.sessions.map(String) : [];
  if (email && !latest.has(email)) latest.set(email, chosen);
}

for (const [session, seats] of Object.entries(ROOMS)) {
  const taken = [...latest.values()].filter((chosen) => chosen.includes(session)).length;
  console.log(`${session.padEnd(12)} ${String(taken).padStart(4)} of ${seats}${taken >= seats ? "  FULL" : ""}`);
}

Wenn ein Workshop voll ist, markiere ihn auf der Seite als voll und entferne seine Option aus dem Formular und der Felddefinition, damit neue Posts ihn nicht wählen können. Wenn der ganze Tag voll ist, wähle Pause form: Posts bekommen 403 form_paused, und die Seite sollte sagen, dass die Anmeldung geschlossen ist.

Am Einlass

1. Exportiere am Vorabend Submissions als CSV und entferne doppelte E-Mail-Adressen, wobei du die neueste behältst.
2. Sortiere nach Name, behalte name, organisation und lunch und druck zwei Exemplare für den Empfang aus.
3. Druck Namensschilder aus derselben Tabelle per Serienbrief, mit der Spalte name.
4. Trag Spontangäste von Hand ein. Nimm sie nach dem Event nur in deine eigene Liste auf, wenn sie zustimmen.

Vor der Ankündigung prüfen

1. Füge unter Allowed domains des Formulars die Domain deiner Site hinzu, plus localhost, während du entwickelst. Lass das Feld leer, um Posts von überall anzunehmen.
2. Melde dich mit deiner eigenen E-Mail-Adresse an und wähle zwei Sessions.
3. Die Bestätigungs-E-Mail kommt von deiner Domain und listet beide Sessions auf.
4. Wenn du einen Webhook hinzugefügt hast, öffne den Endpunkt unter Webhooks. Die Zustellung zeigt succeeded mit der Antwort deines Servers.
5. Führe die Platzzählung aus. Jede deiner zwei Sessions zeigt einen belegten Platz.
6. Nichts angekommen? Stell den Statusfilter im Dashboard auf Spam. Spam bekommt dieselbe Erfolgsantwort wie eine echte Einsendung.

Stolperfallen

Fragen