# Webflow

> Envoyez un Form Block Webflow vers Ikiform avec une action personnalisée, gardez les états de succès et d'erreur de Webflow avec un court script, et autorisez votre site de staging webflow.io.

Le Form Block de Webflow peut envoyer vers n'importe quelle URL. Faites pointer son action vers votre endpoint Ikiform : le formulaire garde la mise en page et les styles créés dans le Designer, tandis qu'Ikiform valide, filtre le spam, stocke, envoie les e-mails et les webhooks.

## Ce que change une action personnalisée

- Webflow ne traite un formulaire que s'il en est la destination. Avec une action personnalisée, le navigateur envoie directement à Ikiform : la soumission n'apparaît donc pas dans les soumissions de formulaire de Webflow, et Webflow n'envoie aucun e-mail de notification.
- Les destinations propres à Webflow ne peuvent pas coexister avec une action personnalisée. Retirez-les sous **Send to** avant d'ajouter Ikiform.
- Les blocs de succès et d'erreur de Webflow (`.w-form-done` et `.w-form-fail`) et le réglage de redirection du formulaire cessent de fonctionner, car Webflow ne voit jamais le résultat. Les visiteurs arrivent sur la page de remerciement d'Ikiform ou sur votre URL **Redirect after submit**. L'[étape 4](#keep-success-state) rétablit les blocs de Webflow.

## Configurez le formulaire

### Étape 1 : Faites pointer le formulaire vers Ikiform

Sélectionnez le formulaire dans le Form Block et ouvrez le panneau **Settings**. Sous **Send to**, choisissez une action personnalisée, collez votre endpoint dans **Action** et réglez **Method** sur **POST**.

`Action`:

```text
https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx
```

Si la méthode reste sur GET, le navigateur ouvre l'endpoint comme une page, qui répond `404 not_found`. Ikiform n'accepte que des POST.

### Étape 2 : Nommez les champs

Le réglage **Name** de chaque input devient le nom du champ dans Ikiform. Webflow le remplit à partir du libellé, ce qui donne des noms comme `Name`, `Email` et `Field 2`. Renommez-les avec les ids que vous voulez voir, comme `name`, `email` et `message`.

- Si vous définissez des [champs](https://ikiform.com/fr/docs/fields.md) sur le formulaire Ikiform, les noms doivent correspondre exactement à leurs ids. Les ids sont en snake_case minuscule, donc `Email` et `email` sont deux champs différents.
- Retirez tout élément reCAPTCHA du formulaire. Ikiform ne le vérifie pas, et sa valeur `g-recaptcha-response` arriverait comme un champ supplémentaire. Utilisez plutôt le [contrôle anti-spam](https://ikiform.com/fr/docs/spam.md#human-check) d'Ikiform.

### Étape 3 : Ajoutez un honeypot

Ajoutez un Input au formulaire, réglez son **Name** sur `_gotcha` et masquez-le avec **Display: none** dans le panneau Style. Dans **Custom attributes**, ajoutez `tabindex` à `-1` et `autocomplete` à `off` pour que le clavier et les gestionnaires de mots de passe l'ignorent. Avec un site plan payant, vous pouvez plutôt coller ceci dans un Code Embed à l'intérieur du formulaire :

`Code Embed`:

```html
<input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
```

### Étape 4 : Choisissez ce qui se passe après l'envoi

L'option la plus simple est une page de remerciement. Créez-en une dans Webflow, publiez-la et collez son URL complète dans **Redirect after submit**, dans les paramètres du formulaire Ikiform.

### Gardez les blocs de succès et d'erreur de Webflow

Pour rester sur la page, envoyez avec `fetch` et affichez vous-même les blocs de Webflow. Collez ceci dans **Page settings** > **Custom code** > **Before </body> tag**, ou dans le code de pied de page du site pour couvrir tous les formulaires. Le script affiche le message d'erreur d'Ikiform dans le bloc d'erreur et utilise le **Waiting text** du bouton pendant l'envoi.

`Before </body> tag`:

```html
<script>
  document.querySelectorAll('form[action^="https://ikiform.com/f/"]').forEach((form) => {
    const wrapper = form.closest(".w-form");
    const done = wrapper?.querySelector(".w-form-done");
    const fail = wrapper?.querySelector(".w-form-fail");
    const button = form.querySelector('[type="submit"]');

    form.addEventListener("submit", async (event) => {
      event.preventDefault();
      const label = button?.value;
      if (button) {
        button.disabled = true;
        button.value = button.dataset.wait || label;
      }
      try {
        const response = await fetch(form.action, {
          method: "POST",
          headers: { Accept: "application/json" },
          body: new FormData(form),
        });
        const result = await response.json();
        if (result.ok) {
          form.style.display = "none";
          if (fail) fail.style.display = "none";
          if (done) done.style.display = "block";
          return;
        }
        const text = fail?.querySelector("div") ?? fail;
        if (text) text.textContent = result.error.message;
        if (fail) fail.style.display = "block";
      } catch {
        if (fail) fail.style.display = "block";
      } finally {
        if (button) {
          button.disabled = false;
          button.value = label;
        }
      }
    });
  });
</script>
```

> Le code personnalisé et l'élément Code Embed nécessitent un site plan payant ou un Workspace plan, et aucun des deux ne s'exécute dans le Designer. Publiez pour les voir fonctionner.

Le script envoie avec `fetch`, donc un formulaire dont le contrôle anti-spam est réglé sur **Ikiform** répond `403 challenge_required` au lieu d'afficher la page de vérification. Utilisez le script avec la vérification désactivée, ou passez-vous du script et laissez le navigateur envoyer normalement, ce qui exécute la vérification sans code supplémentaire.

## Domaines autorisés

Si vous définissez des domaines autorisés, listez chaque adresse où le formulaire est publié. Les sous-domaines d'un domaine listé correspondent déjà.

| Où tourne le formulaire | À ajouter aux domaines autorisés |
| --- | --- |
| Votre domaine personnalisé | `example.com`, qui couvre aussi `www.example.com` |
| Staging Webflow | `your-site.webflow.io` |
| Le canevas du Designer | Rien. Les actions et le code personnalisés n'y tournent pas. |

- N'ajoutez jamais `webflow.io` seul. Tous les sites de cet hébergeur correspondraient, y compris ceux des autres.

## Checklist de test

1. Publiez sur votre domaine de staging `webflow.io`. Les formulaires avec une action personnalisée n'envoient que depuis le site publié.
2. Envoyez le formulaire et ouvrez ses soumissions dans Ikiform. La nouvelle soumission doit apparaître parmi les reçues, pas dans le spam.
3. Vérifiez que les noms de champs correspondent à ceux de l'étape 2, et que le honeypot n'apparaît pas : les noms commençant par `_` ne sont jamais stockés.
4. Vérifiez que vous arrivez sur votre page de remerciement, ou que vous voyez le bloc de succès de Webflow si vous avez ajouté le script.
5. Publiez sur votre domaine personnalisé et envoyez encore une fois depuis celui-ci.

## Dépannage

| Ce que vous voyez | Pourquoi | Solution |
| --- | --- | --- |
| Page `404 not_found` après l'envoi | **Method** est sur GET, donc le navigateur a ouvert l'endpoint comme un lien | Réglez **Method** sur **POST** et publiez à nouveau. |
| La page de remerciement d'Ikiform au lieu du message de succès de Webflow | Le bloc de succès de Webflow ne fonctionne que si Webflow traite le formulaire | Définissez **Redirect after submit**, ou ajoutez le script de l'étape 4. |
| Les soumissions arrivent dans le filtre spam avec `origin_mismatch` | La page qui a envoyé ne fait pas partie des domaines autorisés du formulaire | Ajoutez l'hôte du tableau ci-dessus. Avec **Reject**, les mêmes envois reçoivent plutôt `403 origin_not_allowed`. |
| `422 validation_failed` signalant un champ inconnu | Un nom de champ comme `Email` ou `g-recaptcha-response` ne figure pas dans la définition des champs du formulaire | Renommez l'input avec l'id du champ, ou retirez l'élément reCAPTCHA. |
| Le script ne fait rien | Vous testez dans le Designer, le site n'a pas de plan payant, ou l'action ne commence pas par `https://ikiform.com/f/` | Testez sur le site publié et vérifiez que l'**Action** ne contient pas d'espaces. |
| Le bloc d'erreur affiche `Complete the human check, then send the form again.` | Le contrôle anti-spam est réglé sur **Ikiform** et le script envoie avec `fetch` | Désactivez la vérification pour ce formulaire, ou retirez le script. |

## Voir aussi

- [Créateurs de sites](https://ikiform.com/fr/docs/guides/site-builders.md): L'intégration qui fonctionne dans n'importe quel créateur de sites.
- [Formulaires HTML](https://ikiform.com/fr/docs/html.md): Redirections, champs réservés et honeypot.
- [Domaines autorisés](https://ikiform.com/fr/docs/spam.md#allowed-domains): Comment les origines sont comparées, et ce qui se passe en cas de non-correspondance.
- [Erreurs](https://ikiform.com/fr/docs/errors.md): Chaque code d'erreur, avec sa cause et sa solution.