Conecta un backend real a los formularios que genera tu IA

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.

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.

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:

1. Petición. La pestaña Network muestra un POST a https://formgong.com/submit con success: true en la respuesta.
2. Registro. La consulta aparece en la bandeja de ese formulario en Formgong, con todos los campos.
3. 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.
4. 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».

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.