# Conecta un backend real a los formularios que genera tu IA

Los creadores con IA generan formularios que no envían a ningún sitio. Compara las tres rutas viables, conecta un backend alojado con una instrucción y prueba la entrega antes de lanzar.

Author: Formgong team
Published: 2026-10-06
Updated: 2026-10-06
Language: es
Canonical: https://formgong.com/es/blog/form-backend-for-ai-website-builders/

Lovable, Bolt, v0 y Cursor generan formularios que muestran éxito pero nunca envían los datos. Hay tres rutas que funcionan: el backend del creador, un backend de formularios alojado o tu propia función serverless. Para un formulario de contacto, la más rápida es el backend alojado: una instrucción conecta un POST a /submit con clave pública, y la entrega se comprueba en la bandeja, el correo y Telegram antes del lanzamiento.

## Por qué el formulario generado no envía a ningún sitio

Lovable, Bolt, v0 y Cursor generan interfaces estupendas: campos, validación, botón y mensaje de «¡Gracias!». Pero por defecto ese botón a menudo no hace nada útil: el manejador muestra el agradecimiento de inmediato, sin ninguna petición de red. Los datos no se guardan en ningún sitio.

El otro patrón: la IA conecta por su cuenta Supabase o Lovable Cloud. Funciona, pero para un formulario de contacto simple arrastra una base de datos, configuración de accesos y casi siempre un servicio de correo aparte como Resend. Puedes comprobar tu formulario en un minuto: abre las herramientas de desarrollador, pestaña Network, y envía. Si no hay POST, el formulario es decorativo — justo lo que pasa con la mayoría de los sitios generados.

## Tres rutas viables para el formulario

**1. El backend del creador.** Lovable Cloud / Supabase más un conector de correo. Tiene sentido si tu aplicación ya usa autenticación, bases de datos u otros flujos de servidor. Para un formulario de contacto aislado es infraestructura de más.

**2. Un backend de formularios alojado.** El formulario hace POST a un único endpoint con clave pública; el servicio guarda las consultas y avisa por correo y Telegram. La ruta más rápida para landings y webs corporativas: sin esquemas, funciones edge ni servidores.

**3. Tu propia función serverless.** Control total y responsabilidad total: código, secretos, filtrado de spam y reintentos corren de tu cuenta. Este artículo cubre la segunda ruta: funciona igual en cualquier creador que genere HTML o React.

## Criterios para elegir backend de formularios

**Prueba de entrega.** El «gracias» de la página no prueba nada: necesitas un almacén de consultas con estados de aceptación, entrega y spam. En Formgong es una bandeja con detalles de entrega por canal. **Protección antispam.** Como mínimo honeypot; mejor con Turnstile opcional y evaluación de spam, y que el spam no consuma tu cuota mensual.

**Canales de aviso.** El correo es la base; para una reacción rápida del equipo hace falta Telegram; para integraciones, webhooks firmados. **Ubicación de los datos.** Si tus clientes están en la UE, comprueba dónde se guardan los envíos: Formgong lo mantiene todo en Cloudflare con jurisdicción UE — D1, cola y archivos son europeos. **Cambios sin regenerar la web.** Destinatarios, redirecciones y respuesta automática deben cambiar en el panel, no en código que la IA tenga que regenerar.

## Una instrucción que sirve en cualquier creador

Abre el chat de tu proyecto y pídele que conecte el formulario existente conservando el diseño. La instrucción de abajo vale para Lovable, Bolt, v0 y Cursor; sustituye `fk_your_access_key` por la clave del apartado de conexión de la web de ese formulario en el panel de Formgong.

```text
Connect this form to Formgong. Keep its design and field names.
1. Send a POST request to https://formgong.com/submit (FormData or JSON with access_key).
2. access_key: fk_your_access_key (a public key; it can stay in the code).
3. Show success only after a response with success: true.
4. On error, keep the entered field values and show an error message.
5. Add a hidden botcheck field (honeypot) with no visible UI change.
6. Do not add tokens, secrets, or file inputs.
```

### Ejemplo de petición a la API

```javascript
async function onSubmit(event) {
  event.preventDefault();
  const fields = Object.fromEntries(new FormData(event.currentTarget));
  const response = await fetch("https://formgong.com/submit", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    // _lang: language of Formgong messages and the autoreply (multilingual site: document.documentElement.lang).
    body: JSON.stringify({ _lang: "en", ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  if (!result.success) throw new Error(result.message || "Could not send. Please try again.");
  return result.message; // localized "Sent. Thank you!"
}
```

## Prueba la entrega, no el mensaje de éxito

Cuando el creador aplique los cambios, envía una consulta de prueba reconocible y recorre todo el camino:

- **Petición.** La pestaña Network muestra un POST a `https://formgong.com/submit` con `success: true` en la respuesta.

- **Registro.** La consulta aparece en la bandeja de ese formulario en Formgong, con todos los campos.

- **Correo.** En Free, el correo llega en el resumen de la mañana siguiente a las 08:00, en la zona horaria del titular de la cuenta, para un destinatario. En Pro y Business, cada consulta se envía por correo. Revisa la carpeta de spam.

- **Telegram.** Telegram es inmediato en todos los planes, incluido Free. Si hay un chat conectado, el mensaje llega a ese chat.

Tras publicar, repite en el dominio real: la vista previa del editor puede comportarse distinto. El recorrido completo está en el artículo [«El formulario no envía el correo»](/es/blog/contact-form-not-sending-email/).

No uses campos de archivo en este flujo: el ejemplo es para consultas de texto. Los adjuntos requieren ajustes de formulario aparte y Turnstile.

## Después del lanzamiento: cambios sin regenerar

Cuando el formulario funciona, la mayoría de los cambios no exigen volver al creador. En el panel de Formgong cambias destinatarios de correo, chats de Telegram conectados, redirecciones tras el envío, la respuesta automática al visitante y la protección.

Si las consultas dejan de llegar de repente tras un rediseño, no adivines: el diagnóstico de formularios de Formgong carga tu página y muestra si el snippet está bien instalado — endpoint, método, clave y campos obligatorios. La analítica del formulario indica en qué campos abandonan los visitantes: más barato que un test A/B y sin regenerar código.

## Fallos típicos de los formularios generados por IA

**Aparece «éxito» pero no hay petición**
El creador generó un manejador decorativo. Pídele: «Envía los datos con fetch y muestra éxito solo tras una respuesta success: true».

**El código sigue conteniendo fk_your_access_key**
Es un marcador. Toma la clave real del apartado de conexión de la web de tu formulario y sustitúyela.

**Los campos se vacían tras un error**
El visitante pierde su texto. El manejador debe conservar los valores y mostrar el error; añádelo a tu próxima instrucción.

**El formulario se rompió al activar Turnstile**
Hay que añadir el widget al código y enviar `cf-turnstile-response`. Refresca el ejemplo de integración del panel tras cambiar la protección.

**La consulta existe pero no llega el correo**
Comprueba la verificación de correo del propietario y de los destinatarios. Una dirección sin verificar no es destino de entrega; detalles en la [guía de diagnóstico](/es/blog/contact-form-not-sending-email/).

## Preguntas frecuentes

### ¿Necesita Supabase un formulario de un creador con IA?

No, si es un formulario de contacto aislado. Un backend alojado acepta el POST con clave pública y entrega los avisos; Supabase o Lovable Cloud tienen sentido cuando tu aplicación ya los usa para otros flujos.

### ¿Es seguro dejar access_key en el código generado?

Sí. Es una clave pública de envío: no da acceso a la bandeja ni a los ajustes. Los secretos, tokens de bots y claves de servicios de correo nunca van en el frontend.

### ¿La instrucción funciona en cualquier creador?

Sí en los que generan HTML o React y pueden ejecutar fetch: Lovable, Bolt, v0, Cursor. Solo difieren en cómo aplican los cambios; lo que verificas es el resultado — la petición POST y success: true.

### ¿Dónde se guardan las consultas de los clientes?

Las consultas y los archivos se guardan en la UE, en Cloudflare D1 y en el almacenamiento de archivos con jurisdicción de la UE. Las notificaciones enviadas a Telegram, Slack o Discord las procesan esos servicios, fuera de ese almacén. El sitio sigue necesitando una política de privacidad.

## Fuentes y documentación

- [Lovable Cloud](https://docs.lovable.dev/features/cloud)
- [MDN: Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
- [Documentación de Formgong](https://formgong.com/es/docs/)

[Obtener una clave](https://formgong.com/es/#top)