Squarespace

El bloque Form de Squarespace guarda los envíos en Squarespace y los manda a las conexiones que admite. No tiene ningún ajuste para una URL de action externa. Un bloque Code en modo HTML renderiza tu propio formulario en la página, así que puede enviar directamente a Ikiform.

Añade el bloque de código

1. Inserta un bloque Code

   Edita la página, añade un bloque y elige Code. Pon Mode en HTML y desactiva Display Source; si no, el formulario aparece como texto.

2. Pega el formulario

   <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 reutiliza el estilo de botón de tu sitio. font: inherit y currentColor toman la fuente y el color de texto de la sección, así que el formulario encaja en secciones claras y oscuras.

3. Crea la página de agradecimiento

   Añade una página en Not linked para que no aparezca en tu navegación y usa su URL completa como _redirect. O configúrala como Redirect after submit en los ajustes del formulario y quita el input oculto.

_redirect solo se sigue cuando el formulario tiene dominios permitidos que incluyen el dominio de la página. Sin ellos, los visitantes ven la página de agradecimiento alojada de Ikiform.

Quédate en la página (Core y superiores)

Para mostrar el resultado sin salir de la página, pega este script debajo del formulario en el mismo bloque de código. Envía con fetch, escribe el mensaje de Ikiform en la línea de estado debajo del botón e ignora _redirect. El formulario sigue enviándose de forma normal si el script no carga.

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

Los errores de campo se escriben en la misma línea con el nombre del campo delante, como email: This field is required. Para un mensaje debajo de cada campo, usa los huecos de JavaScript puro. Un formulario con la verificación antispam en Ikiform debería quedarse con la versión HTML, porque los envíos con fetch reciben 403 challenge_required en lugar de la página de verificación.

Dominios permitidos

Squarespace sirve cada sitio en un dominio integrado, además de cualquier dominio que conectes.

• Nunca añadas squarespace.com solo. Coincidiría cualquier sitio de ese host, incluidos los de otras personas.

Lista de pruebas

1. Abre la página en una ventana privada. Puede que los bloques de código no se rendericen mientras tienes la sesión iniciada, aunque los visitantes sí los ven.
2. Envía el formulario en el dominio integrado y en tu dominio conectado, y confirma que ambos envíos aparecen en Ikiform.
3. Comprueba que llegas a tu página de agradecimiento Not linked, no a la de Ikiform.
4. En Basic, confirma que el formulario sigue enviándose. No necesita ningún script.

Solución de problemas

Relacionado

• Formularios HTMLRedirecciones, campos reservados y el honeypot.
• JavaScript purofetch con errores en línea.
• Creadores de sitiosEl embed que funciona en cualquier creador.
• Dominios permitidosCómo se comparan los orígenes y qué pasa cuando no coinciden.