# Wix

> Intégrez à un site Wix un formulaire HTML qui envoie avec fetch, car Wix exécute le HTML personnalisé dans une frame isolée qui ne peut pas naviguer dans la page.

Wix Forms garde les soumissions dans Wix et n'a aucun réglage pour une URL d'action externe. Pour utiliser Ikiform, placez votre propre formulaire dans un élément **Embed HTML**. Wix exécute ce code dans une iframe isolée servie depuis un hôte `filesusr.com` distinct, et tout ce qui suit en découle.

## Pourquoi le formulaire envoie avec fetch

- La frame de Wix autorise les formulaires, les scripts, les popups et l'accès same-origin, mais pas la navigation de premier niveau. `target="_top"` ne peut pas emmener le visiteur vers une page de remerciement.
- Un envoi de formulaire classique chargerait le résultat dans la petite frame, et les pages de remerciement, d'erreur et de vérification d'Ikiform refusent de s'afficher dans une frame. Les visiteurs verraient une frame vide ou refusée.
- Envoyer avec `fetch` et `Accept: application/json` garde le visiteur sur place et affiche le résultat dans l'intégration.

## Ajoutez l'intégration

### Étape 1 : Ajoutez un élément Embed HTML

Dans l'éditeur Wix, ouvrez **Add Elements** > **Embed Code** > **Embed HTML**. Dans Wix Studio, c'est sous **Embed & Social**. Choisissez **Code** plutôt que **Website address**.

### Étape 2 : Collez le formulaire

`Embed HTML`:

```html
<form id="contact" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post" novalidate>
  <label>Email <input name="email" type="email" autocomplete="email" required /></label>
  <p class="error" data-error-for="email"></p>
  <label>Message <textarea name="message" rows="4"></textarea></label>
  <p class="error" data-error-for="message"></p>
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Send</button>
  <p role="status" data-status></p>
</form>

<script>
  const form = document.querySelector("#contact");
  const button = form.querySelector("button");
  const status = form.querySelector("[data-status]");

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    button.disabled = true;
    status.textContent = "Sending";
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(form),
      });
      const result = await response.json();
      const fields = result.ok ? {} : result.error.fields ?? {};
      for (const slot of form.querySelectorAll("[data-error-for]")) {
        slot.textContent = fields[slot.dataset.errorFor]?.[0] ?? "";
      }
      status.textContent = result.ok ? "Thanks, we got it." : result.error.message;
      if (result.ok) form.reset();
    } catch {
      status.textContent = "Couldn't reach the server. Try again.";
    } finally {
      button.disabled = false;
    }
  });
</script>

<style>
  body { margin: 0; font: 15px/1.5 system-ui, sans-serif; }
  form { display: grid; gap: 8px; }
  label { display: grid; gap: 4px; }
  input, textarea, button { font: inherit; padding: 8px 10px; border: 1px solid #d4d4d4; border-radius: 6px; }
  button { background: #111; color: #fff; border: 0; }
  .error { margin: 0; color: #b42318; font-size: 13px; }
</style>
```

La frame n'hérite pas des polices ni des couleurs de votre site, c'est pourquoi le bloc `<style>` les définit. Adaptez-le à votre site.

### Étape 3 : Dimensionnez et publiez

Agrandissez l'élément pour qu'il contienne les erreurs de champ et la ligne de statut, puis publiez. L'éditeur n'affiche qu'un espace réservé pour le code personnalisé : testez donc sur le site publié.

> Le réglage **Custom Code** de Wix, valable pour tout le site, nécessite un plan premium et un domaine connecté, et ajoute du code dans le head ou le body de la page. Il ne peut pas placer un formulaire à un endroit précis de votre mise en page : l'élément Embed HTML reste donc la bonne place pour le formulaire.

## Réglages anti-spam

Laissez le contrôle anti-spam du formulaire désactivé. La vérification humaine d'Ikiform a besoin soit de sa page de vérification, soit d'une petite frame ikiform.com, et aucune ne peut s'exécuter dans la sandbox de Wix. Le honeypot et le score de spam restent actifs sur chaque envoi.

## Domaines autorisés

Ikiform voit l'hôte de la frame, pas votre domaine Wix, car l'envoi part de l'intérieur de l'iframe. Pour le trouver, ouvrez votre page publiée, inspectez l'intégration et lisez le `src` de l'iframe.

| Où tourne le formulaire | À ajouter aux domaines autorisés |
| --- | --- |
| La frame d'intégration | L'hôte exact du `src` de l'iframe, comme `www-example-com.filesusr.com` |
| Votre domaine Wix ou personnalisé | Inutile pour l'intégration, puisque l'envoi n'en provient jamais |

- N'ajoutez jamais `filesusr.com` seul. Tous les sites de cet hébergeur correspondraient, y compris ceux des autres.
- L'hôte de la frame dérive de l'adresse de votre site, donc il change si vous connectez un nouveau domaine. Vérifiez-le à nouveau après un changement de domaine.

## Checklist de test

1. Publiez et ouvrez la page en ligne dans une fenêtre de navigation privée.
2. Avec des [champs](https://ikiform.com/fr/docs/fields.md) définis, envoyez avec un e-mail vide. Le formulaire a `novalidate`, donc le message d'Ikiform doit apparaître sous le champ.
3. Envoyez un vrai message et vérifiez que la ligne de statut affiche « Thanks, we got it. » et que la soumission apparaît dans Ikiform.
4. Activez les domaines autorisés avec l'hôte de la frame et envoyez à nouveau. La soumission doit toujours arriver parmi les reçues.

## Dépannage

| Ce que vous voyez | Pourquoi | Solution |
| --- | --- | --- |
| L'intégration devient vide ou affiche une page refusée après l'envoi | Le script ne s'est pas exécuté, donc le navigateur a envoyé normalement et a tenté de charger la page d'Ikiform dans la frame | Vérifiez que le script est bien dans l'élément, et que l'id du formulaire est `contact`. |
| Les soumissions arrivent dans le spam avec `origin_mismatch` | L'hôte de la frame ne fait pas partie des domaines autorisés, ou vous avez listé votre domaine Wix à la place | Ajoutez l'hôte `filesusr.com` exact du `src` de l'iframe. |
| La ligne de statut affiche `Complete the human check, then send the form again.` | Le contrôle anti-spam est réglé sur **Ikiform**, qui ne peut pas s'exécuter dans la sandbox | Désactivez la vérification pour ce formulaire. |
| La ligne de statut indique qu'il n'a pas pu joindre le serveur | Un bloqueur de publicités ou un filtre réseau a bloqué la requête. Certains réseaux bloquent `filesusr.com` lui-même. | Testez sur un autre réseau ou dans une fenêtre de navigation privée sans extension. |
| Les messages d'erreur sont coupés | L'élément est moins haut que le formulaire | Agrandissez l'élément dans l'éditeur. |

## Voir aussi

- [JavaScript pur](https://ikiform.com/fr/docs/guides/javascript.md): `fetch` avec erreurs affichées en ligne.
- [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.
- [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.
- [Protection anti-spam](https://ikiform.com/fr/docs/spam.md): Honeypot, score et vérification humaine.