,
message: String(result.error.message),
values,
},
{ status: response.status },
);
}
export default function Report({ actionData }: Route.ComponentProps) {
const sending = useNavigation().state === "submitting";
if (actionData?.sent) return Thanks. We'll look at that page today.
;
const fields = actionData?.fields ?? {};
const values = actionData?.values;
return (
);
}
```
**SvelteKit**
La form action por defecto devuelve `fail()` con el estado y los errores de campo de Ikiform. Sin JavaScript, la página se vuelve a renderizar con ellos; con `use:enhance` se actualiza en su sitio. Declara `IKIFORM_SECRET_KEY` en `src/env.ts` con `defineEnvVars` para que `$app/env/private` pueda leerla.
`src/routes/report/+page.server.ts`:
```ts
import { fail } from "@sveltejs/kit";
import { IKIFORM_SECRET_KEY } from "$app/env/private";
import type { Actions } from "./$types";
export const actions = {
default: async ({ request, fetch, url }) => {
const form = await request.formData();
const values = {
email: String(form.get("email") ?? "").trim(),
page: String(form.get("page") ?? "").trim(),
severity: String(form.get("severity") ?? ""),
details: String(form.get("details") ?? "").trim(),
};
const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: `Bearer ${IKIFORM_SECRET_KEY}`,
Origin: request.headers.get("origin") ?? url.origin,
},
body: JSON.stringify({ ...values, _gotcha: String(form.get("_gotcha") ?? "") }),
});
const result = await response.json();
if (!result.ok) {
return fail(response.status, { values, fields: (result.error.fields ?? {}) as Record });
}
return { sent: true };
},
} satisfies Actions;
```
`src/routes/report/+page.svelte`:
```svelte
{#if form?.sent}
Thanks. We'll look at that page today.
{:else}
{/if}
```
**Nuxt**
Una ruta de servidor reenvía el aviso con `runtimeConfig.ikiformSecretKey`, configurada desde `NUXT_IKIFORM_SECRET_KEY`. Lanza `createError` con los errores de campo en `data`, que `$fetch` devuelve en el cliente.
`server/api/report.post.ts`:
```ts
export default defineEventHandler(async (event) => {
const body = await readBody>(event);
const { ikiformSecretKey } = useRuntimeConfig(event);
const origin = getRequestHeader(event, "origin");
const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: `Bearer ${ikiformSecretKey}`,
...(origin ? { Origin: origin } : {}),
},
body: JSON.stringify({
email: body.email ?? "",
page: body.page ?? "",
severity: body.severity ?? "",
details: body.details ?? "",
_gotcha: body._gotcha ?? "",
}),
});
const result = await response.json();
if (!result.ok) {
throw createError({
status: response.status,
message: String(result.error.message),
data: { fields: result.error.fields ?? {} },
});
}
return { sent: true };
});
```
`app/components/ReportForm.vue`:
```vue
Thanks. We'll look at that page today.
```
**React**
Una app de una sola página envía desde el navegador, así que aquí no hay clave secreta; **Allowed domains** protege el formulario. `Accept: application/json` obtiene una respuesta JSON en lugar de una redirección.
`src/ReportForm.tsx`:
```tsx
import { type FormEvent, useState } from "react";
const ENDPOINT = "https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx";
const SEVERITIES = [
["cosmetic", "Looks wrong"],
["broken", "Something doesn't work"],
["blocking", "I can't continue"],
];
export function ReportForm() {
const [sent, setSent] = useState(false);
const [sending, setSending] = useState(false);
const [fields, setFields] = useState>({});
const [problem, setProblem] = useState("");
async function onSubmit(event: FormEvent) {
event.preventDefault();
setSending(true);
setFields({});
setProblem("");
try {
const response = await fetch(ENDPOINT, {
method: "POST",
headers: { Accept: "application/json" },
body: new FormData(event.currentTarget),
});
const result = await response.json();
if (result.ok) setSent(true);
else if (result.error.fields) setFields(result.error.fields);
else setProblem(result.error.message);
} catch {
setProblem("Couldn't reach the server. Check your connection and try again.");
} finally {
setSending(false);
}
}
if (sent) return Thanks. We'll look at that page today.
;
return (
);
}
```
**Vue**
El mismo envío desde el navegador en un componente de Vue. El formulario mantiene un `action` y un `method` reales, así que sigue enviándose de la forma normal si el script no carga.
`src/components/ReportForm.vue`:
```vue
Thanks. We'll look at that page today.
```
> Las versiones de servidor envían con una clave secreta, así que Ikiform se salta **Allowed domains** (dominios permitidos) y su verificación humana. Todos los envíos vienen entonces de la IP de tu servidor, y el límite Standard de 5 por minuto por visitante cuenta a todos tus visitantes juntos. Elige el [límite de frecuencia](https://ikiform.com/es/docs/rate-limits.md) Relaxed o Custom para un formulario que envías a través de un servidor, y guarda `IKIFORM_SECRET_KEY` en variables de entorno solo de servidor.
Cada versión de servidor reenvía la cabecera `Origin` del navegador cuando la hay, porque un `fetch` desde el servidor no envía ninguna e Ikiform la usa para reconocer las pruebas gratuitas desde `localhost` en un espacio de trabajo sin plan.
- Todas las versiones mantienen un `method` real y, donde envían directamente a Ikiform, un `action` real. Con los scripts desactivados, el formulario sigue enviándose y recibe el `303`.
- El `name` de cada input es el `id` del campo en la definición. Si no coinciden, como `url` en lugar de `page`, se recibe `422` con `Unknown field "url"`.
- El input oculto `_gotcha` es el honeypot. Los bots que lo rellenan se guardan como spam, sin avisar.
- Las versiones con JavaScript muestran `error.fields` bajo cada input, usando el primer mensaje de cada campo. La versión en HTML puro deja eso a la página de error de Ikiform.
La documentación profundiza por framework: [Next.js](https://ikiform.com/es/docs/guides/nextjs.md), [Astro](https://ikiform.com/es/docs/guides/astro.md), [SvelteKit](https://ikiform.com/es/docs/guides/sveltekit.md), [Nuxt](https://ikiform.com/es/docs/guides/nuxt.md), [React](https://ikiform.com/es/docs/guides/react.md), [Vue](https://ikiform.com/es/docs/guides/vue.md) y [desde un servidor](https://ikiform.com/es/docs/guides/server.md).
## Dos capas de validación
La validación del navegador y la del servidor hacen trabajos distintos. La comprobación de restricciones del navegador (`required`, `type="email"`, `minlength`, `pattern`) da respuesta inmediata, pero cualquiera puede saltársela: un bot envía directamente, y un script puede llamar a `form.submit()`, que nunca ejecuta la comprobación. El servidor es el único sitio donde una regla se cumple de verdad.
| Regla | En el navegador | En la definición de campos de Ikiform |
| --- | --- | --- |
| Obligatorio | `required` | `"required": true` |
| Email | `type="email"` | `"type": "email"`, con `allowed_domains` opcional |
| URL | `type="url"` | `"type": "url"`, con `https_only` opcional |
| Longitud | `minlength`, `maxlength` | `validation.min_length`, `max_length` |
| Solo las opciones de la lista | Un ``, que un bot ignora | `options`; cualquier otra cosa se rechaza |
| Sin campos extra | No es posible | Se rechaza cualquier campo que no esté en la definición |
Sin una definición, Ikiform acepta cualquier campo y lo guarda tal como llega. Publica una y valida, guarda números y casillas como números y booleanos reales, y rechaza el envío con `422 validation_failed` antes de guardar nada. [Validación](https://ikiform.com/es/guides/html-form-submission/validation.md) muestra cómo hacer que las dos capas digan lo mismo.
## Enviar con JavaScript
Para mantener al visitante en la página, escucha `submit`, llama a `preventDefault()` y envía `new FormData(form)` con `fetch`. Unos pocos detalles deciden si funciona a la primera:
- No pongas tú el `Content-Type` cuando el cuerpo es `FormData`. El navegador pone `multipart/form-data` con el separador; una cabecera escrita a mano no tiene separador y el cuerpo no se puede analizar.
- Envía `Accept: application/json`. Ikiform elegiría JSON por `Sec-Fetch-Mode` de todos modos, pero la cabecera lo hace explícito, y es una de las cabeceras que los navegadores pueden enviar a otro sitio sin preflight.
- Un cuerpo `FormData` o `URLSearchParams` es una petición simple entre sitios, así que no hay preflight. Un cuerpo JSON con `Content-Type: application/json` provoca primero un preflight; Ikiform lo responde, pero cuesta un viaje de ida y vuelta.
- `form.submit()` se salta la validación y el evento `submit`. `form.requestSubmit()` ejecuta ambos, como haría un clic.
- Pasa el botón pulsado como segundo argumento, `new FormData(form, event.submitter)`, si su `name` y su `value` importan.
El patrón completo, con estado de carga, foco y errores de red, está en [sin recargar la página](https://ikiform.com/es/guides/html-form-submission/without-page-reload.md). La documentación de [JavaScript y fetch](https://ikiform.com/es/docs/frameworks.md) lista todas las cabeceras y formatos de cuerpo que acepta el endpoint.
## Elige tu caso
Cada una de estas páginas toma una parte de un envío y va más allá del resumen de arriba, con código para ese caso.
- [Sin recargar la página](https://ikiform.com/es/guides/html-form-submission/without-page-reload.md): Envía un formulario con fetch y FormData para que el visitante se quede en la página, con errores de campo, estado de carga, reintentos y un plan B cuando los scripts fallan.
- [Redirección tras el envío](https://ikiform.com/es/guides/html-form-submission/redirect-after-submit.md): Manda a los visitantes a tu propia página de agradecimiento cuando se envía un formulario: la redirección 303, el campo _redirect, qué dominios se permiten y qué pasa al recargar.
- [El atributo action](https://ikiform.com/es/guides/html-form-submission/action-attribute.md): Qué hace el atributo action de un formulario, cómo se resuelven los valores relativos y vacíos, cómo formaction envía un formulario a dos sitios y por qué los hostings estáticos responden 405.
- [Validación de formularios](https://ikiform.com/es/guides/html-form-submission/validation.md): Valida un formulario con required, type, pattern y min, da estilo a los errores con :user-invalid y aplica las mismas reglas en el servidor con definiciones de campos.
## Comprueba que funciona
Haz esto una vez por formulario, en una ventana privada. Ikiform no tiene plan gratuito. Probar es gratis: un espacio de trabajo sin plan acepta 50 envíos de prueba al mes desde `localhost`. Para publicar, elige Pro desde 6 $/mes para 500 envíos, o paga una vez: 10.000 envíos por 49 $ o 50.000 envíos por 149 $, con créditos que nunca caducan. Consulta los [precios](https://ikiform.com/es/pricing).
1. En **Allowed domains** del formulario, añade el dominio de tu sitio, y `localhost` mientras desarrollas. Déjalo vacío para aceptar envíos desde cualquier lugar.
2. Desactiva JavaScript en las herramientas de desarrollo del navegador y envía el formulario. Debería llegar igualmente a tu página de agradecimiento con un `303`.
3. Con JavaScript activado, abre el panel Network y envía otra vez. La petición a `/f/` debería responder `201` con JSON, y la página no debería recargarse.
4. Envía con un mensaje demasiado corto. El envío normal muestra la página de error de Ikiform con la etiqueta de tu campo; el envío con script muestra el mensaje bajo el campo.
5. En la página de agradecimiento, pulsa recargar. No debería reenviarse nada ni aparecer un segundo envío.
6. Abre **Submissions** en el panel. El nuevo envío está ahí con todos los campos que enviaste.
7. Envía con el honeypot relleno, `_gotcha=bot`. Igualmente recibe una respuesta de éxito, pero el envío se guarda como spam y no envía email ni webhook.
## Solución de problemas
| Problema | Qué hacer |
| --- | --- |
| `405 Method Not Allowed` tras enviar | El formulario envió a tu propio hosting estático, que no acepta POST. Revisa `action`: debe ser la URL completa `https://ikiform.com/f/`, no una ruta relativa ni estar vacío. |
| Abrir el endpoint en una pestaña muestra `404 not_found` | Es lo esperado. Una pestaña envía GET, y el endpoint solo acepta POST. Comprueba que el `method` del formulario sea `post`; un formulario sin method envía GET con los campos en la URL. |
| `415 unsupported_media_type` | El formulario tiene `enctype="text/plain"`, o un script envió un tipo que Ikiform no lee. Quita el `enctype` o usa `multipart/form-data`. |
| `422 validation_failed` | El envío no coincide con la definición de campos del formulario. `error.fields` indica cada campo y el motivo. Haz que el `name` del input coincida con el id del campo. |
| El navegador acaba en la página de agradecimiento de Ikiform en lugar de la tuya | `_redirect` se ignora salvo que su dominio esté en **Allowed domains** y sea una URL `https:`. Añade el dominio, o configura **Redirect after submit** en los ajustes del formulario. |
| Falta un campo en el envío | No tiene `name`, está `disabled` o es una casilla sin marcar. Dale un `name`, usa `readonly` en lugar de `disabled` o define un campo `checkbox` para que una casilla sin marcar se guarde como `false`. |
| Al recargar, pide reenviar el formulario | La página respondió al POST con `200`. Los envíos directos a Ikiform siempre reciben un `303`; si tu propio servidor está en medio, redirige después de gestionar el envío. |
| `403 origin_not_allowed`, o todos los envíos acaban en spam | El dominio de la página no está en **Allowed domains** del formulario. Añádelo, y `localhost` para las pruebas locales. Los subdominios de un dominio de la lista están permitidos. |
## Preguntas
### ¿Qué hace el atributo action en un formulario HTML?
Es la URL que recibe los datos del formulario. Un valor relativo se resuelve respecto a la dirección de la página, y un formulario sin action envía a la propia página. Un botón de envío puede sobrescribirlo con formaction.
### ¿Un formulario debe usar GET o POST?
POST para todo lo que envíe datos personales o cambie el estado, como formularios de contacto, registro o pedido. GET es para formularios de búsqueda y filtro, donde los campos tienen sentido en una URL que se pueda compartir.
### ¿Por qué al recargar la página se vuelve a enviar mi formulario?
La página que ves es la respuesta directa a un POST, así que el navegador ofrece repetirlo. Responde a un POST correcto con una redirección 303 a una página de agradecimiento. Ikiform lo hace con cada envío desde el navegador.
### ¿Puede un formulario HTML enviar JSON?
No por sí solo. Un formulario envía datos urlencoded o multipart. Para enviar JSON, lee el formulario con FormData en un manejador de submit y envía JSON.stringify(Object.fromEntries(data)) con fetch. Ikiform acepta los tres.
### ¿Basta con el atributo required para validar un formulario?
No. Ayuda a las personas, pero los bots envían directamente y se lo saltan. Valida también en el servidor. Con Ikiform, define los campos y cada envío se comprueba con ellos antes de guardarse.
### ¿Puedo enviar un formulario sin backend?
Necesitas algo que reciba el POST, pero no tiene por qué ser tu servidor. Apunta el action del formulario a un backend de formularios como Ikiform y la página puede seguir siendo totalmente estática.
### ¿Puede el formulario aceptar subida de archivos?
Todavía no. Un envío que contiene un archivo se rechaza con 422 files_not_supported. Pide en su lugar un enlace al archivo, como la URL de una carpeta compartida.
## Más guías
- [Sin recargar la página](https://ikiform.com/es/guides/html-form-submission/without-page-reload.md): Envía un formulario con fetch y FormData para que el visitante se quede en la página, con errores de campo, estado de carga, reintentos y un plan B cuando los scripts fallan.
- [Redirección tras el envío](https://ikiform.com/es/guides/html-form-submission/redirect-after-submit.md): Manda a los visitantes a tu propia página de agradecimiento cuando se envía un formulario: la redirección 303, el campo _redirect, qué dominios se permiten y qué pasa al recargar.
- [El atributo action](https://ikiform.com/es/guides/html-form-submission/action-attribute.md): Qué hace el atributo action de un formulario, cómo se resuelven los valores relativos y vacíos, cómo formaction envía un formulario a dos sitios y por qué los hostings estáticos responden 405.
- [Validación de formularios](https://ikiform.com/es/guides/html-form-submission/validation.md): Valida un formulario con required, type, pattern y min, da estilo a los errores con :user-invalid y aplica las mismas reglas en el servidor con definiciones de campos.
- [Inscripción a eventos](https://ikiform.com/es/guides/event-registration.md): Recibe RSVP en la página de tu evento: el formulario, límite de acompañantes, un recuento fiable, cierre al llenarse y lista de entrada, sin app de entradas.
- [Verifica las firmas de webhook](https://ikiform.com/es/guides/webhook-signature-verification.md): Comprueba que un webhook de formulario viene de verdad de Ikiform: el esquema HMAC-SHA256 de Standard Webhooks, un vector de prueba, cuerpos sin procesar, marcas de tiempo y rotación de secretos.
- [Lista de espera para un nuevo SaaS](https://ikiform.com/es/guides/waitlist.md): Crea una lista de espera previa al lanzamiento en tu propia landing page: el formulario, el antispam, los duplicados, los emails de confirmación y una exportación limpia el día del lanzamiento.