Framer

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

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 si vous en avez une.

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.

   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.

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

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<HTMLFormElement>) {
    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 <p>{successText}</p>;

  return (
    <form onSubmit={onSubmit} style={{ display: "grid", gap: 12, width: "100%" }}>
      <input name="email" type="email" placeholder="Email" autoComplete="email" required style={field} />
      <textarea name="message" placeholder="Message" rows={4} style={field} />
      <input name="_gotcha" type="text" tabIndex={-1} autoComplete="off" hidden />
      {status === "error" ? <p role="alert">{message}</p> : null}
      <button type="submit" disabled={status === "sending"} style={field}>
        {status === "sending" ? "Sending" : "Send"}
      </button>
    </form>
  );
}

addPropertyControls(IkiformContact, {
  formId: { type: ControlType.String, title: "Form ID", defaultValue: "frm_xxxxxxxxxxxxxxxx" },
  successText: { type: ControlType.String, title: "Success text", defaultValue: "Thanks, we got it." },
});

• Faites glisser le composant sur la page et renseignez Form ID dans le panneau des propriétés. Stylez les inputs en modifiant field, ou remplacez les éléments par les vôtres.
• Accept: application/json fait répondre Ikiform en JSON, pour que le composant puisse afficher le résultat sur place.
• Le composant envoie avec fetch, alors laissez le contrôle anti-spam du formulaire désactivé. Le honeypot et le score de spam restent actifs.

Domaines autorisés

Ceci ne concerne que le code component et l'intégration. Laissez les domaines autorisés vides pour le webhook.

• N'ajoutez jamais framer.app ou framer.website seul. Tous les sites de cet hébergeur correspondraient, y compris ceux des autres.

Checklist de test

1. Publiez le site. Framer n'envoie de webhooks que pour les formulaires du site publié.
2. Envoyez le formulaire et vérifiez la soumission dans Ikiform. Avec le webhook, les champs doivent correspondre exactement aux noms de vos inputs.
3. Pour le code component, activez les domaines autorisés, envoyez depuis le domaine publié et vérifiez que l'envoi n'est pas marqué comme spam.

Dépannage

Voir aussi

• ReactÉtats d'attente, d'erreur et de succès.
• Créateurs de sitesL'intégration qui fonctionne dans n'importe quel créateur de sites.
• Limites de débitLes préréglages et leur recharge.
• Protection anti-spamHoneypot, score et vérification humaine.