# Squarespace

> Pega un formulario HTML en un bloque de código de Squarespace. El HTML funciona en todos los planes; añadir JavaScript requiere el plan Core o superior.

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.

| Plan | Qué puede ejecutar un bloque de código |
| --- | --- |
| Basic | HTML y CSS. Los scripts y los iframes no se renderizan, así que usa el formulario HTML. |
| Core, Plus, Advanced | HTML, CSS y JavaScript. Puedes añadir la versión mejorada. |

## Añade el bloque de código

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

### Paso 2: Pega el formulario

`Code block`:

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

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

`Code block, below the form`:

```html
<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](https://ikiform.com/es/docs/guides/javascript.md). 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.

| Dónde funciona el formulario | Añadir a Allowed domains |
| --- | --- |
| Dominio integrado | `your-site.squarespace.com` |
| Dominio conectado | `example.com`, que también cubre `www.example.com` |

- 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

| Qué ves | Por qué | Solución |
| --- | --- | --- |
| El código aparece en la página como texto | **Display Source** está activado o **Mode** no es HTML | Pon **Mode** en **HTML** y desactiva **Display Source**. |
| El script mejorado nunca se ejecuta | El sitio está en Basic, donde los scripts de los bloques de código no se renderizan | Quédate con el formulario HTML o pasa a Core. |
| La página de agradecimiento de Ikiform en lugar de la tuya | No hay dominios permitidos, o `_redirect` usa `http:` u otro dominio | Añade tus dominios o configura **Redirect after submit**. |
| Los envíos llegan al filtro de spam con `origin_mismatch` | La página que envió no está entre los dominios permitidos del formulario | Añade el host de la tabla de arriba. Si eliges **Reject**, esos mismos envíos reciben `403 origin_not_allowed`. |
| El formulario se ve sin estilos en el editor pero bien para los visitantes | Los bloques de código no siempre se renderizan mientras tienes la sesión iniciada | Revisa la página en una ventana privada. |

## Relacionado

- [Formularios HTML](https://ikiform.com/es/docs/html.md): Redirecciones, campos reservados y el honeypot.
- [JavaScript puro](https://ikiform.com/es/docs/guides/javascript.md): `fetch` con errores en línea.
- [Creadores de sitios](https://ikiform.com/es/docs/guides/site-builders.md): El embed que funciona en cualquier creador.
- [Dominios permitidos](https://ikiform.com/es/docs/spam.md#allowed-domains): Cómo se comparan los orígenes y qué pasa cuando no coinciden.