# Wix

> Incrusta en un sitio de Wix un formulario HTML que envía con fetch, porque Wix ejecuta el HTML personalizado en un frame aislado que no puede navegar la página.

Wix Forms guarda los envíos en Wix y no tiene ningún ajuste para una URL de action externa. Para usar Ikiform, pon tu propio formulario en un elemento **Embed HTML**. Wix ejecuta ese código dentro de un iframe aislado servido desde un host aparte, `filesusr.com`, y eso condiciona todo lo que sigue.

## Por qué el formulario envía con fetch

- El frame de Wix permite formularios, scripts, ventanas emergentes y acceso al mismo origen, pero no la navegación de nivel superior. `target="_top"` no puede llevar al visitante a una página de agradecimiento.
- Un envío de formulario normal cargaría el resultado dentro del pequeño frame, y las páginas de agradecimiento, error y verificación de Ikiform no se muestran dentro de frames. Los visitantes verían un frame vacío o bloqueado.
- Enviar con `fetch` y `Accept: application/json` mantiene al visitante en su sitio y muestra el resultado dentro del embed.

## Añade el embed

### Paso 1: Añade un elemento Embed HTML

En el Wix Editor, abre **Add Elements** > **Embed Code** > **Embed HTML**. En Wix Studio está en **Embed & Social**. Elige **Code** en lugar de **Website address**.

### Paso 2: Pega el formulario

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

El frame no hereda las fuentes ni los colores de tu sitio, así que los define el bloque `<style>`. Cámbialo para que coincida con tu sitio.

### Paso 3: Ajusta el tamaño y publica

Haz el elemento lo bastante alto para que quepan los errores de campo y la línea de estado, y luego publica. El editor solo muestra un marcador de posición para el código personalizado, así que prueba en el sitio publicado.

> El ajuste **Custom Code** de todo el sitio en Wix, que necesita un plan premium y un dominio conectado, añade código al head o al body de la página. No puede colocar un formulario en un punto concreto de tu diseño, así que el elemento Embed HTML sigue siendo el lugar para el formulario.

## Ajustes de spam

Deja desactivada la verificación antispam del formulario. La verificación humana de Ikiform necesita su página de verificación o un pequeño frame de ikiform.com, y ninguno de los dos puede funcionar dentro del sandbox de Wix. El honeypot y la puntuación de spam siguen funcionando en cada envío.

## Dominios permitidos

Ikiform ve el host del frame, no tu dominio de Wix, porque el envío sale desde dentro del iframe. Para encontrarlo, abre tu página publicada, inspecciona el embed y lee el `src` del iframe.

| Dónde funciona el formulario | Añadir a Allowed domains |
| --- | --- |
| El frame del embed | El host exacto del `src` del iframe, como `www-example-com.filesusr.com` |
| Tu dominio de Wix o tu dominio propio | No hace falta para el embed, porque el envío nunca sale de él |

- Nunca añadas `filesusr.com` solo. Coincidiría cualquier sitio de ese host, incluidos los de otras personas.
- El host del frame se deriva de la dirección de tu sitio, así que cambia si conectas un dominio nuevo. Vuelve a comprobarlo después de cambiar de dominio.

## Lista de pruebas

1. Publica y abre la página en producción en una ventana privada.
2. Con [campos](https://ikiform.com/es/docs/fields.md) definidos, envía con el email vacío. El formulario tiene `novalidate`, así que el mensaje de Ikiform debería aparecer debajo del campo.
3. Envía un mensaje real y confirma que la línea de estado dice "Thanks, we got it." y que el envío aparece en Ikiform.
4. Activa los dominios permitidos con el host del frame y vuelve a enviar. Debería seguir llegando como recibido.

## Solución de problemas

| Qué ves | Por qué | Solución |
| --- | --- | --- |
| El embed se queda en blanco o muestra una página bloqueada después de enviar | El script no se ejecutó, así que el navegador envió de forma normal e intentó cargar la página de Ikiform dentro del frame | Comprueba que el script quedó dentro del elemento y que el id del formulario es `contact`. |
| Los envíos llegan a spam con `origin_mismatch` | El host del frame no está en los dominios permitidos, o pusiste tu dominio de Wix en su lugar | Añade el host exacto de `filesusr.com` que aparece en el `src` del iframe. |
| La línea de estado dice `Complete the human check, then send the form again.` | La verificación antispam está en **Ikiform**, que no puede funcionar dentro del sandbox | Desactiva la verificación en este formulario. |
| La línea de estado dice que no pudo conectar con el servidor | Un bloqueador de anuncios o un filtro de red bloqueó la petición. Algunas redes bloquean el propio `filesusr.com`. | Prueba en otra red o en una ventana privada sin extensiones. |
| Los mensajes de error se cortan | El elemento es más bajo que el formulario | Haz el elemento más alto en el editor. |

## Relacionado

- [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.
- [Protección antispam](https://ikiform.com/es/docs/spam.md): Honeypot, puntuación y verificación humana.