# Framer > Envoyez un formulaire Framer vers Ikiform via sa destination webhook sans code, ou affichez votre propre formulaire avec un code component qui envoie depuis le navigateur. Les formulaires Framer ne peuvent pas envoyer vers une URL d'action externe, mais ils peuvent envoyer chaque soumission à un webhook. Cela donne deux options : garder le formulaire de Framer et ajouter Ikiform comme webhook, ou ajouter un petit code component qui envoie depuis le navigateur du visiteur. | | Formulaire Framer avec un webhook | Code component | | --- | --- | --- | | Qui envoie | Les serveurs de Framer | Le navigateur du visiteur | | Code | Aucun | Un fichier React | | Domaines autorisés | À laisser vide : les envois serveur n'ont pas d'`Origin` | Comparés à votre domaine Framer | | Honeypot | Non disponible | Inclus | | Limites de débit comptées par | Les adresses des serveurs de Framer | Chaque visiteur | | Contrôle anti-spam Ikiform | À laisser désactivé | À laisser désactivé | ## Formulaire Framer avec un webhook ### Étape 1 : Nommez les inputs Framer envoie du JSON avec le nom de chaque input comme clé, donc les noms donnés aux inputs deviennent les noms de champs dans Ikiform. Utilisez des ids en minuscules comme `email` et `message`, et faites-les correspondre à votre [définition de champs](https://ikiform.com/fr/docs/fields.md) si vous en avez une. ### Étape 2 : Ajoutez Ikiform comme webhook Sélectionnez le formulaire sur le canevas. À côté de **Send To** dans la barre latérale droite, choisissez **Add…** > **Webhook** et collez votre endpoint. Framer exige une URL `https://`, ce qu'est déjà l'endpoint. `URL du webhook`: ```text https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx ``` Framer peut signer les requêtes avec un secret. Ikiform ne vérifie pas l'en-tête `Framer-Signature`, donc le secret est facultatif ici. ### Étape 3 : Ajustez les paramètres du formulaire Ikiform - Laissez **Allowed domains** vide. Framer envoie depuis ses serveurs sans en-tête `Origin`, donc avec des domaines définis, chaque envoi est marqué comme spam avec `origin_mismatch`, ou refusé avec **Reject**. - Laissez le contrôle anti-spam désactivé. Un envoi JSON sans token reçoit `403 challenge_required`, et Framer n'a aucun moyen d'exécuter la vérification. - Choisissez la [limite de débit](https://ikiform.com/fr/docs/rate-limits.md) **Relaxed**. Ikiform compte les envois par adresse IP et par formulaire, et chaque envoi vient des serveurs de Framer plutôt que de vos visiteurs. Framer considère toute réponse autre que `2xx` comme un échec et réessaie jusqu'à 5 fois. Ikiform répond `201` une fois la soumission stockée. Un envoi refusé par Ikiform, comme `422 validation_failed`, échoue de la même façon à chaque tentative : corrigez la cause au lieu d'attendre. ## Code component Un code component affiche un vrai formulaire sur votre page : c'est donc le navigateur qui l'envoie, et Ikiform voit votre site comme origine. Dans le panneau **Assets**, ouvrez **Code**, créez un fichier de code et collez : `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 (