JavaScript et fetch

Tout code capable d'envoyer une requête HTTP peut soumettre à Ikiform. Envoyez du JSON, du FormData ou des données urlencoded à https://ikiform.com/f/<formId> et lisez une réponse JSON. Le SDK enveloppe tout cela dans une seule fonction, mais il est facultatif. Pour une mise en place pas à pas sur une stack précise, voir Guides par plateforme.

Avec fetch

const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
  method: "POST",
  headers: { "Content-Type": "application/json", Accept: "application/json" },
  body: JSON.stringify({
    name: "Ada Lovelace",
    email: "ada@example.com",
    message: "Hello",
  }),
});

const result = await response.json();
if (!result.ok) console.error(result.error.code, result.error.fields);

Essayez

curl https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx \
  -H "Content-Type: application/json" \
  -d '{"name":"Ada Lovelace","email":"ada@example.com","message":"Hello from the Ikiform docs."}'

Endpoints

Ouvrir /f/<formId> dans un onglet de navigateur envoie un GET, qui répond 404 not_found. C'est normal : l'endpoint n'accepte que des POST.

Formats de corps

Les corps doivent être en UTF-8. Un charset autre que utf-8 reçoit 415 unsupported_charset, tout comme des octets qui ne sont pas de l'UTF-8 valide. Un tableau JSON ou un corps mal formé reçoit 400 invalid_body.

En-têtes

En-têtes de requête

En-têtes de réponse

CORS

L'endpoint de soumission accepte les envois cross-origin depuis n'importe quel site. Les preflights réussissent toujours et renvoient l'origine de la requête. Aucun cookie ni identifiant n'est utilisé, donc ce n'est pas CORS qui protège votre formulaire, ce sont les domaines autorisés. Avec des domaines autorisés définis, un envoi depuis un autre site est stocké comme spam ou refusé, selon le réglage du formulaire. Voir Domaines autorisés.

OPTIONS /f/frm_xxxxxxxxxxxxxxxx HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type, Accept, Idempotency-Key, Authorization
Access-Control-Max-Age: 86400
Vary: Origin

Réponses

Un succès renvoie 201 avec l'id de la nouvelle soumission. Les erreurs utilisent partout la même enveloppe, avec les erreurs de champ indexées par id de champ quand la validation échoue. Tous les codes sont listés sur Erreurs.

{ "ok": true, "id": "sub_01k7v2c9t3e8m5q4x6z0a1b2c3" }

Idempotence

Envoyez un en-tête Idempotency-Key, ou un champ _idempotency, pour rendre les nouvelles tentatives sûres. Les clés font jusqu'à 255 caractères et sont limitées au formulaire pendant 24 heures. L'en-tête l'emporte si les deux sont envoyés.

Les envois qui échouent avant le stockage de la soumission, comme les erreurs de validation, ne conservent pas la clé : vous pouvez corriger les données et réessayer avec la même clé. Une boucle de nouvelles tentatives sûre :

const key = crypto.randomUUID();

async function send(attempt = 1) {
  const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
    method: "POST",
    headers: { "Content-Type": "application/json", "Idempotency-Key": key },
    body: JSON.stringify({ email: "ada@example.com" }),
  }).catch(() => null);
  if (response && response.status < 500 && response.status !== 429) return response.json();
  if (attempt === 3) throw new Error("Ikiform is unreachable");
  const wait = Number(response?.headers.get("Retry-After")) || attempt * 2;
  await new Promise((resolve) => setTimeout(resolve, wait * 1000));
  return send(attempt + 1);
}

Guides par plateforme

Frameworks

• Next.jsUn composant client, ou une server action.
• ReactÉtats d'attente, d'erreur et de succès.
• VueUn composant monofichier.
• NuxtEnvoie avant l'hydratation, puis avec $fetch.
• SvelteUn composant Svelte 5 et une server action.
• SvelteKitUne page prérendue avec amélioration progressive.
• AstroUn formulaire sans JavaScript, amélioré si vous le souhaitez.
• GatsbyUn formulaire statique, ou une Gatsby Function.
• JavaScript purfetch avec erreurs affichées en ligne.

Générateurs de sites statiques

• HugoUn partial et un shortcode pour les fichiers de contenu.
• JekyllUn include, et la configuration GitHub Pages.
• EleventyUn shortcode pour Nunjucks, Liquid et Markdown.

Créateurs de sites

• WebflowLe Form Block avec une action personnalisée.
• FramerUn webhook de formulaire, ou un composant de code.
• WordPressLe bloc Custom HTML, ou un shortcode.
• WixUn embed HTML qui envoie avec fetch.
• SquarespaceUn bloc de code, avec ou sans JavaScript.
• CarrdUn formulaire personnalisé qui envoie vers une URL.