Framer-Formulare: wann ein Formular-Backend sinnvoll ist und wie

Die nativen Formulare von Framer senden jede Einsendung an E-Mail, Google Sheets oder einen Webhook, mit eingebautem Spamschutz. Für einen Posteingang oder eine Tabelle brauchst du also vielleicht nichts weiter. Ergänze Ikiform als Webhook-Ziel, wenn du jede Einsendung mit Spam-Status gespeichert, gegen deine Felder validiert, ans Team gemailt und an mehrere signierte Webhooks weitergeleitet haben willst. Da Framer von seinen Servern sendet, lockere entweder die Origin-Prüfungen des Formulars oder setze ein kleines Relay dazwischen, das Framers Signatur prüft.

Was auf Framer anders ist

Framer ist der einzige Builder in dieser Anleitung ohne Limit, dem man entkommen müsste. Seine Formulare können an E-Mail, Google Sheets oder jeden Webhook senden, und Framer hat eingebauten Spamschutz, der verdächtige Einsendungen markiert oder blockiert. Seine Webhooks sind signiert: Jeder Request trägt einen Header Framer-Signature, ein HMAC-SHA256 über Body und Einsendungs-ID, und einen Framer-Webhook-Submission-Id. Framer wiederholt bis zu fünfmal, wenn dein Endpunkt nicht mit 2xx antwortet, und folgt keinen Weiterleitungen.

Sei also ehrlich, warum du ein Formular-Backend ergänzen würdest. Das deckt jede Seite ab:

Reicht dir die erste Zeile, bleib bei den Zielen von Framer. Der Rest dieser Seite ist für den Fall, dass sie nicht reicht.

Der Haken: Framer sendet von seinen Servern

Ein Webhook-Ziel heißt, dass die Server von Framer den Post senden, nicht der Browser des Besuchers. Auf der Seite von Ikiform ändern sich drei Dinge:

• Kein Origin. Server-Posts tragen keinen Origin-Header, also wird bei gesetzten Allowed domains jeder Post so behandelt, als käme er von der falschen Site.
• Geteilte IP-Adressen. Ikiform zählt Rate-Limits pro IP-Adresse, und jeder Post kommt von wenigen Framer-Adressen statt von denen deiner Besucher.
• Kein Honeypot. Framer sendet die Inputs, die du gebaut hast, und sonst nichts, und sein Formular kann Ikiforms Menschlichkeitsprüfung nicht ausführen.

Du kannst das hinnehmen oder es mit einem Relay beheben. Beide Wege stehen unten.

Option 1: Ikiform als Webhook

1. Gib in Framer jedem Input einen kleingeschriebenen Namen: name, work_email, company, team_size. Framer nutzt die Namen als JSON-Keys.
2. Wähle das Formular und neben Send To dann Add… > Webhook. Füge deinen Endpunkt ein. Lass das Secret leer; Ikiform prüft Framer-Signature nicht.
3. Lass in den Einstellungen des Ikiform-Formulars Allowed domains leer, lass Spam check aus und setze Rate limit auf Relaxed.
4. Veröffentliche. Framer sendet Webhooks nur von der veröffentlichten Site.

https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx

Ikiform antwortet mit 201, sobald die Einsendung gespeichert ist, was Framer als zugestellt zählt. Ein 422 validation_failed scheitert bei allen fünf Wiederholungen gleich, also korrigiere die Input-Namen, statt zu warten. Der Spam-Score läuft trotzdem bei jedem Post: Links, Spam-Phrasen, Wegwerfadressen und Wiederholungen.

Option 2: ein signiertes Relay

Deploye einen Cloudflare Worker, der die Signatur von Framer prüft und gültige Posts mit deinem Secret Key weiterleitet. Dann kann das Ikiform-Formular deine Framer-Domain unter Allowed domains mit Reject listen, sodass alles abgewiesen wird, was weder ein Browser auf deiner Site noch dein Worker ist.

interface Env {
  FRAMER_SECRET: string;
  IKIFORM_SECRET_KEY: string;
}

const ENDPOINT = "https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx";
const encoder = new TextEncoder();

async function signatureFor(secret: string, body: ArrayBuffer, submissionId: string) {
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(secret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"],
  );
  const id = encoder.encode(submissionId);
  const message = new Uint8Array(body.byteLength + id.byteLength);
  message.set(new Uint8Array(body), 0);
  message.set(id, body.byteLength);
  const digest = new Uint8Array(await crypto.subtle.sign("HMAC", key, message));
  return `sha256=${[...digest].map((byte) => byte.toString(16).padStart(2, "0")).join("")}`;
}

function sameText(a: string, b: string) {
  const left = encoder.encode(a);
  const right = encoder.encode(b);
  return left.byteLength === right.byteLength && crypto.subtle.timingSafeEqual(left, right);
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    if (request.method !== "POST") return new Response(null, { status: 405 });
    const signature = request.headers.get("framer-signature") ?? "";
    const submissionId = request.headers.get("framer-webhook-submission-id") ?? "";
    const body = await request.arrayBuffer();
    if (!submissionId || !sameText(signature, await signatureFor(env.FRAMER_SECRET, body, submissionId))) {
      return new Response("Bad signature", { status: 401 });
    }

    const response = await fetch(ENDPOINT, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${env.IKIFORM_SECRET_KEY}`,
        "Idempotency-Key": submissionId,
      },
      body,
    });
    if (response.ok) return new Response(null, { status: 204 });
    return new Response(await response.text(), { status: response.status });
  },
};

Deployen

npx wrangler secret put FRAMER_SECRET
npx wrangler secret put IKIFORM_SECRET_KEY
npx wrangler deploy

• FRAMER_SECRET ist das Secret, das du am Webhook-Ziel von Framer setzt. Framer verlangt mindestens 32 Zeichen und zeigt es nicht erneut an, also erzeuge es, speichere es und füge es an beiden Stellen ein.
• IKIFORM_SECRET_KEY ist ein geheimer API-Key aus dem Ikiform-Dashboard. Leg ihn nie in Framer ab.
• Die Signatur ist sha256= plus das Hex-HMAC über den rohen Body, gefolgt von der Einsendungs-ID. Lies den Body einmal als Bytes und nutze genau diese Bytes für die Prüfung und die Weiterleitung.
• Idempotency-Key sorgt dafür, dass eine Wiederholung von Framer die erste Antwort von Ikiform wiedergibt, statt ein Duplikat zu speichern. Keys werden 24 Stunden aufbewahrt.
• Der Worker reicht den Status von Ikiform durch. Framer wiederholt jede Antwort außerhalb von 2xx bis zu fünfmal, also bekommt ein 429 oder 5xx eine weitere Chance, während ein 422 jedes Mal gleich scheitert, bis du die Input-Namen korrigierst.

Richte den Webhook von Framer dann auf die URL des Workers statt auf den Endpunkt, mit eingetragenem Secret.

Option 3: das Formular von Framer weglassen

Eine Code-Komponente rendert ein echtes Formular und sendet aus dem Browser des Besuchers, sodass Origin-Prüfungen, der Honeypot und Rate-Limits pro Besucher wie auf jeder Site funktionieren. Du verlierst für dieses Formular die visuelle Formularbearbeitung von Framer. Die Framer-Anleitung der Doku enthält die Komponente.

Prüfen, dass es auf Framer funktioniert

1. Veröffentliche die Framer-Site und sende das Formular dort ab, nicht in der Vorschau des Editors.
2. Öffne Submissions im Dashboard. Die neue Einsendung ist da, mit jedem Feld, das du gesendet hast.
3. Prüfe, dass die Feldnamen genau zu deinen Input-Namen passen, ohne von Framer ergänzte Keys.
4. Für das Relay: Sende einen Request mit einer erfundenen Framer-Signature an den Worker und prüfe, dass er mit 401 antwortet.
5. Für das Relay: In den Details der Einsendung ist der Origin leer und der Status received, nicht spam.
6. Prüfe das Postfach jedes Benachrichtigungsempfängers. Jeder bekommt eine E-Mail mit den Feldern, und Reply geht an den Absender, wenn das Formular ein email-Feld hat.
7. Wenn du einen Webhook hinzugefügt hast, öffne den Endpunkt unter Webhooks. Die Zustellung zeigt succeeded mit der Antwort deines Servers.

Stolperfallen

Fragen