# Webflow

> Envía un Form Block de Webflow a Ikiform con un action personalizado, conserva los estados de éxito y error de Webflow con un script corto y permite tu sitio de staging en webflow.io.

El Form Block de Webflow puede enviar a cualquier URL. Apunta su action a tu endpoint de Ikiform y el formulario conserva el diseño y los estilos que creaste en el Designer, mientras Ikiform valida, filtra el spam, guarda, envía emails y manda webhooks.

## Qué cambia un action personalizado

- Webflow solo procesa un formulario cuando es el destino. Con un action personalizado, el navegador envía directamente a Ikiform, así que el envío no aparece en los envíos de formularios de Webflow y Webflow no manda ningún email de notificación.
- Los destinos propios de Webflow no pueden funcionar junto a un action personalizado. Quítalos en **Send to** antes de añadir Ikiform.
- Los bloques de éxito y error de Webflow (`.w-form-done` y `.w-form-fail`) y el ajuste de redirección del propio formulario dejan de funcionar, porque Webflow nunca ve el resultado. Los visitantes llegan a la página de agradecimiento de Ikiform o a tu URL de **Redirect after submit**. El [paso 4](#keep-success-state) recupera los bloques de Webflow.

## Configura el formulario

### Paso 1: Apunta el formulario a Ikiform

Selecciona el formulario dentro del Form Block y abre el panel **Settings**. En **Send to**, elige un action personalizado, pega tu endpoint en **Action** y pon **Method** en **POST**.

`Action`:

```text
https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx
```

Si dejas el método en GET, el navegador abre el endpoint como una página, que responde `404 not_found`. Ikiform solo acepta envíos.

### Paso 2: Ponles nombre a los campos

El ajuste **Name** de cada input se convierte en el nombre del campo en Ikiform. Webflow lo rellena a partir de la etiqueta, así que obtienes nombres como `Name`, `Email` y `Field 2`. Cámbialos por los ids que quieres ver, como `name`, `email` y `message`.

- Si defines [campos](https://ikiform.com/es/docs/fields.md) en el formulario de Ikiform, los nombres deben coincidir exactamente con sus ids. Los ids van en snake_case en minúsculas, así que `Email` y `email` son campos distintos.
- Quita cualquier elemento reCAPTCHA del formulario. Ikiform no lo verifica y su valor `g-recaptcha-response` llegaría como un campo extra. Usa en su lugar la [verificación antispam](https://ikiform.com/es/docs/spam.md#human-check) de Ikiform.

### Paso 3: Añade un honeypot

Añade un Input al formulario, pon su **Name** en `_gotcha` y ocúltalo con **Display: none** en el panel Style. En **Custom attributes**, añade `tabindex` con el valor `-1` y `autocomplete` con el valor `off` para que los teclados y los gestores de contraseñas lo ignoren. Con un plan de sitio de pago, puedes pegar esto en un Code Embed dentro del formulario:

`Code Embed`:

```html
<input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
```

### Paso 4: Elige qué pasa después del envío

La opción más sencilla es una página de agradecimiento. Créala en Webflow, publícala y pega su URL completa en **Redirect after submit**, en los ajustes del formulario de Ikiform.

### Conserva los bloques de éxito y error de Webflow

Para quedarte en la página, envía con `fetch` y alterna tú los bloques de Webflow. Pega esto en **Page settings** > **Custom code** > **Before </body> tag**, o en el código del pie del sitio para cubrir todos los formularios. Muestra el mensaje de error de Ikiform dentro del bloque de error y usa el **Waiting text** del botón mientras envía.

`Before </body> tag`:

```html
<script>
  document.querySelectorAll('form[action^="https://ikiform.com/f/"]').forEach((form) => {
    const wrapper = form.closest(".w-form");
    const done = wrapper?.querySelector(".w-form-done");
    const fail = wrapper?.querySelector(".w-form-fail");
    const button = form.querySelector('[type="submit"]');

    form.addEventListener("submit", async (event) => {
      event.preventDefault();
      const label = button?.value;
      if (button) {
        button.disabled = true;
        button.value = button.dataset.wait || label;
      }
      try {
        const response = await fetch(form.action, {
          method: "POST",
          headers: { Accept: "application/json" },
          body: new FormData(form),
        });
        const result = await response.json();
        if (result.ok) {
          form.style.display = "none";
          if (fail) fail.style.display = "none";
          if (done) done.style.display = "block";
          return;
        }
        const text = fail?.querySelector("div") ?? fail;
        if (text) text.textContent = result.error.message;
        if (fail) fail.style.display = "block";
      } catch {
        if (fail) fail.style.display = "block";
      } finally {
        if (button) {
          button.disabled = false;
          button.value = label;
        }
      }
    });
  });
</script>
```

> El código personalizado y el elemento Code Embed necesitan un plan de sitio de pago o un plan Workspace, y ninguno de los dos se ejecuta en el Designer. Publica para verlos funcionar.

El script envía con `fetch`, así que un formulario con la verificación antispam en **Ikiform** responde `403 challenge_required` en lugar de mostrar la página de verificación. Usa el script con la verificación desactivada, o prescinde del script y deja que el navegador envíe de forma normal, lo que ejecuta la verificación sin código extra.

## Dominios permitidos

Si configuras dominios permitidos, incluye todas las direcciones donde se publica el formulario. Los subdominios de un dominio de la lista ya coinciden.

| Dónde funciona el formulario | Añadir a Allowed domains |
| --- | --- |
| Tu dominio propio | `example.com`, que también cubre `www.example.com` |
| Staging de Webflow | `your-site.webflow.io` |
| El lienzo del Designer | Nada. Los actions personalizados y el código personalizado no se ejecutan ahí. |

- Nunca añadas `webflow.io` solo. Coincidiría cualquier sitio de ese host, incluidos los de otras personas.

## Lista de pruebas

1. Publica en tu dominio de staging `webflow.io`. Los formularios con un action personalizado solo envían desde el sitio publicado.
2. Envía el formulario y abre los envíos del formulario en Ikiform. El nuevo envío debería aparecer como recibido, no como spam.
3. Comprueba que los nombres de campo coinciden con los que pusiste en el paso 2 y que el honeypot no aparece: los nombres que empiezan con `_` nunca se guardan.
4. Confirma que llegas a tu página de agradecimiento, o que ves el bloque de éxito de Webflow si añadiste el script.
5. Publica en tu dominio propio y vuelve a enviar una vez desde ahí.

## Solución de problemas

| Qué ves | Por qué | Solución |
| --- | --- | --- |
| Página `404 not_found` después de enviar | **Method** está en GET, así que el navegador abrió el endpoint como un enlace | Pon **Method** en **POST** y vuelve a publicar. |
| La página de agradecimiento de Ikiform en lugar del mensaje de éxito de Webflow | El bloque de éxito de Webflow solo funciona cuando Webflow gestiona el formulario | Configura **Redirect after submit**, o añade el script del paso 4. |
| 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`. |
| `422 validation_failed` con un campo desconocido | Un nombre de campo como `Email` o `g-recaptcha-response` no está en la definición de campos del formulario | Cambia el nombre del input por el id del campo, o quita el elemento reCAPTCHA. |
| El script no hace nada | Estás probando en el Designer, el sitio no tiene un plan de pago o el action no empieza con `https://ikiform.com/f/` | Prueba en el sitio publicado y comprueba que **Action** no tiene espacios. |
| El bloque de error dice `Complete the human check, then send the form again.` | La verificación antispam está en **Ikiform** y el script envía con `fetch` | Desactiva la verificación en este formulario o quita el script. |

## Relacionado

- [Creadores de sitios](https://ikiform.com/es/docs/guides/site-builders.md): El embed que funciona en cualquier creador.
- [Formularios HTML](https://ikiform.com/es/docs/html.md): Redirecciones, campos reservados y el honeypot.
- [Dominios permitidos](https://ikiform.com/es/docs/spam.md#allowed-domains): Cómo se comparan los orígenes y qué pasa cuando no coinciden.
- [Errores](https://ikiform.com/es/docs/errors.md): Cada código de error, con su causa y su solución.