Formulaires HTML

Un simple formulaire HTML suffit à toute l'intégration. Pas de script, pas d'iframe, rien à intégrer : réglez l'action sur l'endpoint de votre formulaire et gardez votre markup et votre CSS. Cela fonctionne aussi dans les créateurs de sites qui permettent de coller du HTML personnalisé ; voir Créateurs de sites.

Un formulaire de base

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <label>
    Name
    <input name="name" autocomplete="name" required />
  </label>
  <label>
    Email
    <input name="email" type="email" autocomplete="email" required />
  </label>
  <label>
    Message
    <textarea name="message" rows="5"></textarea>
  </label>
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Send</button>
</form>

• method doit valoir post. Le navigateur envoie application/x-www-form-urlencoded, ou multipart/form-data si vous définissez enctype. Les deux fonctionnent.
• Chaque contrôle doté d'un name devient un champ. Le navigateur n'envoie pas les contrôles sans nom ni les contrôles désactivés.
• Les valeurs sont stockées en texte UTF-8, normalisées en NFC, avec les fins de ligne CRLF converties en LF et les caractères de contrôle supprimés.
• La validation du navigateur, comme required et type="email", aide les gens, mais ce n'est pas un contrôle de sécurité. Définissez des champs pour qu'Ikiform applique des règles côté serveur.

Après l'envoi

Un envoi réussi depuis un navigateur reçoit une redirection 303. Ikiform choisit la cible dans cet ordre :

1. Le réglage Redirect after submit du formulaire dans le tableau de bord. N'importe quelle URL http: ou https: fonctionne ici, car seuls les membres de l'espace de travail peuvent la définir.
2. Un champ _redirect (ou _next) dans l'envoi, s'il respecte les règles ci-dessous.
3. Sinon, la page de remerciement hébergée par Ikiform à /f/<formId>/thanks. Si le formulaire a des domaines autorisés et que l'envoi vient d'une page https: sur l'un d'eux, la page renvoie un lien vers celle-ci.

Règles pour _redirect

Une valeur _redirect vient du navigateur du visiteur, donc Ikiform ne la suit que si c'est une URL https: sans nom d'utilisateur, mot de passe ni port personnalisé, sur l'un des domaines autorisés du formulaire ou l'un de leurs sous-domaines. Les formulaires sans domaines autorisés ignorent complètement _redirect. Avec example.com comme domaine autorisé :

Un _redirect qui n'est pas suivi mène à la page de remerciement hébergée ; il ne provoque jamais d'erreur. Les requêtes JSON ignorent les redirections et reçoivent 201 avec l'id de la soumission.

Quand un envoi est refusé

Si un envoi est refusé, par exemple parce qu'un champ obligatoire manque, le navigateur affiche une page d'erreur hébergée avec le statut HTTP de l'erreur. Elle liste les problèmes par libellé de champ et renvoie vers le formulaire. Voir Erreurs pour tous les codes.

Noms de champs et tableaux

Les noms répétés et les noms terminés par [] deviennent des tableaux. Utilisez [] pour les groupes de cases à cocher et <select multiple>, pour qu'un choix unique soit quand même stocké comme tableau.

<fieldset>
  <legend>Topics</legend>
  <label><input type="checkbox" name="topics[]" value="billing" /> Billing</label>
  <label><input type="checkbox" name="topics[]" value="api" /> API</label>
</fieldset>

<select name="plan">
  <option value="starter">Starter</option>
  <option value="team">Team</option>
</select>

<label><input type="checkbox" name="newsletter" /> Send me product news</label>

Cocher les deux sujets et la case newsletter stocke :

{
  "topics": ["billing", "api"],
  "plan": "team",
  "newsletter": "on"
}

• Les noms entre crochets comme address[city] sont gardés tels quels ; ils ne deviennent pas des objets imbriqués. Envoyez du JSON si vous voulez des valeurs imbriquées.
• Une case non cochée n'est pas envoyée du tout. Avec un champ checkbox défini, une case absente est stockée comme false et une case cochée comme true.
• Une soumission peut avoir jusqu'à 100 champs, des noms jusqu'à 128 caractères et des valeurs jusqu'à 16 Ko. Voir Limites.

Champs réservés

Les noms qui commencent par _ sont des instructions pour Ikiform. Ils ne sont jamais stockés comme réponses.

Tout autre champ commençant par _ est également retiré : vous pouvez utiliser des noms comme _source pour vos propres marqueurs masqués sans qu'ils soient stockés.

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <input name="email" type="email" required />
  <input type="hidden" name="_subject" value="New demo request" />
  <input type="hidden" name="_redirect" value="https://example.com/thanks" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Request a demo</button>
</form>

Le honeypot

Le nom par défaut du honeypot est _gotcha. Vous pouvez le changer par formulaire sous Honeypot field dans les paramètres du formulaire ; le nom choisi est traité comme réservé et jamais stocké. Un simple attribut hidden suffit pour la plupart des bots. Si du spam passe quand même, cachez plutôt l'input hors de l'écran, car certains bots ignorent les inputs marqués hidden :

<div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden">
  <label>
    Leave this empty
    <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" />
  </label>
</div>

Gardez tabindex="-1" et autocomplete="off" pour que les utilisateurs au clavier et les gestionnaires de mots de passe ne le remplissent jamais.

Ajouter une vérification humaine

Les formulaires dont le contrôle anti-spam est réglé sur Ikiform ne demandent aucun changement dans votre HTML. Quand un navigateur envoie sans token, Ikiform répond par une courte page « Checking you're human » sur ikiform.com. Elle exécute Cloudflare Turnstile, puis renvoie les champs d'origine avec le token. Votre visiteur arrive sur la même page de remerciement qu'avant. Voir Protection anti-spam pour le parcours complet.

Avec vos propres clés Turnstile

Si le formulaire utilise Your own Turnstile keys, affichez le widget vous-même. Il ajoute le champ cf-turnstile-response à l'envoi. Les envois sans token valide sont refusés avec 403 captcha_failed.

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <input name="email" type="email" required />
  <div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>
  <button>Send</button>
</form>