# Framer > Sende ein Framer-Formular ohne Code über sein Webhook-Ziel an Ikiform oder rendere dein eigenes Formular mit einer Code-Komponente, die aus dem Browser sendet. Framer-Formulare können nicht an eine externe Action-URL senden, aber jede Einsendung an einen Webhook schicken. Das ergibt zwei Wege: Du behältst das Framer-Formular und fügst Ikiform als Webhook hinzu, oder du setzt eine kleine Code-Komponente ein, die aus dem Browser des Besuchers sendet. | | Framer-Formular mit Webhook | Code-Komponente | | --- | --- | --- | | Wer den Request sendet | Die Server von Framer | Der Browser des Besuchers | | Code | Keiner | Eine React-Datei | | Erlaubte Domains | Leer lassen: Server-Requests haben keinen `Origin` | Wird mit deiner Framer-Domain abgeglichen | | Honeypot | Nicht verfügbar | Enthalten | | Rate-Limits zählen | Die Serveradressen von Framer | Jeden Besucher | | Ikiform-Spamprüfung | Ausgeschaltet lassen | Ausgeschaltet lassen | ## Framer-Formular mit Webhook ### Schritt 1: Inputs benennen Framer sendet JSON mit dem Namen jedes Inputs als Schlüssel, daher werden die Namen, die du den Inputs gibst, zu den Feldnamen in Ikiform. Nutze kleingeschriebene IDs wie `email` und `message` und halte dich an deine [Felddefinition](https://ikiform.com/de/docs/fields.md), falls du eine hast. ### Schritt 2: Ikiform als Webhook hinzufügen Wähle das Formular auf der Arbeitsfläche aus. Wähle in der rechten Seitenleiste neben **Send To** die Option **Add…** > **Webhook** und füge deinen Endpunkt ein. Framer verlangt eine `https://`-URL, und das ist der Endpunkt bereits. `Webhook-URL`: ```text https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx ``` Framer kann Requests mit einem Secret signieren. Ikiform prüft den Header `Framer-Signature` nicht, daher ist das Secret hier optional. ### Schritt 3: Einstellungen des Ikiform-Formulars anpassen - Lass **Allowed domains** leer. Framer sendet von seinen Servern ohne `Origin`-Header, daher wird bei gesetzten Domains jeder Request mit `origin_mismatch` als Spam markiert oder mit **Reject** abgelehnt. - Lass die Spamprüfung ausgeschaltet. Ein JSON-Request ohne Token bekommt `403 challenge_required`, und Framer hat keine Möglichkeit, die Prüfung auszuführen. - Wähle das [Rate-Limit](https://ikiform.com/de/docs/rate-limits.md) **Relaxed**. Ikiform zählt Requests pro IP-Adresse und Formular, und jeder Request kommt von den Servern von Framer statt von deinen Besuchern. Framer behandelt jede Antwort außer `2xx` als Fehler und versucht es bis zu 5-mal erneut. Ikiform antwortet mit `201`, sobald die Einsendung gespeichert ist. Ein Request, den Ikiform ablehnt, etwa mit `422 validation_failed`, schlägt bei jedem erneuten Versuch genauso fehl, also behebe die Ursache, statt zu warten. ## Code-Komponente Eine Code-Komponente rendert ein echtes Formular auf deiner Seite, daher sendet der Browser es und Ikiform sieht deine Site als Origin. Öffne im Panel **Assets** den Bereich **Code**, erstelle eine Code-Datei und füge Folgendes ein: `IkiformContact.tsx`: ```tsx import { addPropertyControls, ControlType } from "framer"; import { type CSSProperties, type FormEvent, useState } from "react"; const field: CSSProperties = { font: "inherit", padding: "10px 12px", borderRadius: 8, border: "1px solid rgba(0, 0, 0, 0.15)", }; export default function IkiformContact({ formId, successText }: { formId: string; successText: string }) { const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle"); const [message, setMessage] = useState(""); async function onSubmit(event: FormEvent) { event.preventDefault(); setStatus("sending"); try { const response = await fetch(`https://ikiform.com/f/${formId}`, { method: "POST", headers: { Accept: "application/json" }, body: new FormData(event.currentTarget), }); const result = await response.json(); if (result.ok) return setStatus("sent"); setMessage(result.error.message); } catch { setMessage("Couldn't reach the server. Try again."); } setStatus("error"); } if (status === "sent") return

{successText}

; return (