Wix

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

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.

2. Collez le formulaire

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

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é.

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.

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

Voir aussi

• JavaScript purfetch avec erreurs affichées en ligne.
• Créateurs de sitesL'intégration qui fonctionne dans n'importe quel créateur de sites.
• Domaines autorisésComment les origines sont comparées, et ce qui se passe en cas de non-correspondance.
• Protection anti-spamHoneypot, score et vérification humaine.