Squarespace

Le bloc Form de Squarespace stocke les soumissions dans Squarespace et les envoie vers les connexions qu'il prend en charge. Il n'a aucun réglage pour une URL d'action externe. Un bloc Code en mode HTML affiche votre propre formulaire dans la page, qui peut donc envoyer directement à Ikiform.

Ajoutez le bloc de code

1. Insérez un bloc Code

   Modifiez la page, ajoutez un bloc et choisissez Code. Réglez Mode sur HTML et désactivez Display Source ; sinon, le formulaire s'affiche comme du texte.

2. Collez le formulaire

   <form id="contact" class="ikiform" 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 type="hidden" name="_redirect" value="https://example.com/thank-you">
     <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
     <button type="submit" class="sqs-block-button-element">Send</button>
     <p role="status" data-status></p>
   </form>
   
   <style>
     .ikiform { display: grid; gap: 12px; max-width: 480px; }
     .ikiform label { display: grid; gap: 4px; }
     .ikiform input, .ikiform textarea { font: inherit; padding: 10px 12px; border: 1px solid currentColor; }
   </style>

   sqs-block-button-element reprend le style de bouton de votre site. font: inherit et currentColor récupèrent la police et la couleur du texte de la section, donc le formulaire s'accorde aux sections claires comme sombres.

3. Créez la page de remerciement

   Ajoutez une page sous Not linked pour qu'elle n'apparaisse pas dans votre navigation, et utilisez son URL complète comme _redirect. Ou définissez-la comme Redirect after submit dans les paramètres du formulaire et retirez l'input masqué.

_redirect n'est suivi que si le formulaire a des domaines autorisés qui incluent le domaine de la page. Sans eux, les visiteurs voient la page de remerciement hébergée par Ikiform.

Rester sur la page (Core et supérieur)

Pour afficher le résultat sans quitter la page, collez ce script sous le formulaire, dans le même bloc de code. Il envoie avec fetch, écrit le message d'Ikiform dans la ligne de statut sous le bouton et ignore _redirect. Le formulaire envoie toujours normalement si le script ne se charge pas.

<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 = Object.entries(result.ok ? {} : result.error.fields ?? {});
      const problems = fields.map(([name, messages]) => name + ": " + messages[0]).join(". ");
      status.textContent = result.ok ? "Thanks, we got it." : problems || result.error.message;
      if (result.ok) form.reset();
    } catch {
      status.textContent = "Couldn't reach the server. Try again.";
    } finally {
      button.disabled = false;
    }
  });
</script>

Les erreurs de champ sont écrites sur la même ligne, précédées du nom du champ, comme email: This field is required. Pour un message sous chaque champ, utilisez les emplacements de JavaScript pur. Un formulaire dont le contrôle anti-spam est Ikiform doit garder la version simple, car les envois fetch reçoivent 403 challenge_required au lieu de la page de vérification.

Domaines autorisés

Squarespace sert chaque site sur un domaine intégré, en plus des domaines que vous connectez.

• N'ajoutez jamais squarespace.com seul. Tous les sites de cet hébergeur correspondraient, y compris ceux des autres.

Checklist de test

1. Ouvrez la page dans une fenêtre de navigation privée. Les blocs de code peuvent ne pas s'afficher quand vous êtes connecté, même si les visiteurs les voient.
2. Envoyez le formulaire sur le domaine intégré et sur votre domaine connecté, et vérifiez que les deux soumissions apparaissent dans Ikiform.
3. Vérifiez que vous arrivez sur votre page de remerciement Not linked, et non sur celle d'Ikiform.
4. Sur Basic, vérifiez que le formulaire envoie toujours. Il n'a besoin d'aucun script.

Dépannage

Voir aussi

• Formulaires HTMLRedirections, champs réservés et honeypot.
• 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.