Guía práctica

Cómo hacer que el formulario de Lovable reciba consultas reales

Conserva el formulario que diseñaste y añade la recepción de mensajes, sin mantener otro servidor.

Respuesta breve. Obtén la clave del formulario en Formgong, verifica tu correo y pide a Lovable que conecte el formulario existente. Los datos se enviarán a /submit y los avisos a los destinatarios verificados y chats conectados. Para esta integración no necesitas un backend propio.

Formgong·

Tu formulario Nombre Email Mensaje Enviar Formgong Telegram Nueva consulta Nombre · Email Abrir consulta + aviso por correo
El diseño sigue en tu web. Formgong recibe las consultas y envía los avisos.

Un mensaje de agradecimiento no es una entrega

La web puede mostrar «Gracias» sin haber guardado nada. Decide primero quién recibe los datos. Lovable dispone de backend e integraciones propias; si tu aplicación ya las utiliza, puedes procesar allí el formulario.

Formgong encaja cuando necesitas una bandeja de consultas y avisos por correo o Telegram, mientras mantienes el diseño en tu web.

Prepara una dirección verificada y la clave correcta

Introduce tu correo en Formgong y confirma el enlace recibido. Los envíos de una cuenta sin verificar pueden quedar retenidos. Después abre el formulario y su apartado de conexión de la web.

Copia access_key: es una clave pública para enviar datos, no para leer la bandeja ni cambiar ajustes. Sustituye la clave de muestra por la de ese formulario.

Indica a Lovable qué debe conservar

Pide que conecte el formulario actual sin cambiar su diseño ni los nombres de los campos. Añade estas instrucciones y sustituye fk_your_access_key. El ejemplo admite texto; no añadas archivos, claves secretas de correo ni el token de un bot.

Instrucciones para Lovable
Añade un formulario de contacto que envíe los mensajes a Formgong. No crees backend, base de datos ni secretos.

- POST https://formgong.com/submit
- Campo oculto access_key con el valor fk_your_access_key (la clave es pública y va en el frontend)
- Campos: name, email, phone opcional, message. Etiquetas en español
- Honeypot: campo botcheck oculto fuera de pantalla
- Sin archivos ni funciones de servidor
- Formulario HTML normal, o fetch con Accept: application/json. El éxito es json.success === true
Ejemplo de petición a la API

Sustituye la clave y gestiona los estados de espera, éxito y error. Conserva los campos si falla el envío.

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",
    },
    body: JSON.stringify({ ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  if (!result.success) throw new Error(result.message || "Formgong error");
}

Sigue una consulta de prueba hasta el final

Envía un mensaje fácil de reconocer. Comprueba la respuesta de la web, el registro en el formulario correcto y el correo, incluida la carpeta de spam. Si se usa fetch, muestra éxito después de success: true y conserva el texto al fallar.

Repite la prueba en el dominio publicado y en el móvil. La vista previa del editor no sustituye esta comprobación.

Conecta el chat desde los ajustes

Abre Telegram en los ajustes del formulario, sigue el enlace y pulsa Start en el bot. Para un grupo, añade el bot y envía /connect con el código del panel. Ese código es distinto de la clave pública.

Comprueba el chat conectado y envía otra consulta. La guía de Telegram explica ambos casos.

Si no llega, localiza primero el punto de fallo

Si no existe el registro, revisa https://formgong.com/submit y la clave. Si existe pero falta el correo, revisa la verificación del destinatario, los avisos y el spam. botcheck debe estar oculto y vacío.

Al activar Turnstile, actualiza la integración para enviar su token. Consulta la guía de diagnóstico antes de repetir pruebas sin cambios.

Cambios después de publicar

Destinatarios, chats, asunto y página de agradecimiento se ajustan en Formgong sin volver a publicar la web. Free incluye 300 envíos mensuales por cuenta, con correo y Telegram. Verifica también el comportamiento de la web ante un error.

Preguntas frecuentes

¿Necesito Supabase para este formulario?

No para conectarlo con Formgong. Si tu aplicación ya usa Lovable o Supabase como backend, también puedes usar esa infraestructura.

¿Puede verse la clave en el navegador?

Sí. access_key es pública y solo permite enviar consultas. No da acceso al panel.

¿Se conserva el diseño?

Formgong recibe datos, mientras los campos y estilos siguen en la web. Pide a Lovable que los conserve y revisa el resultado.

¿El éxito confirma la llegada del correo?

No. Confirma la aceptación de la petición; el registro y la entrega del aviso se comprueban por separado.

Fuentes y documentación

Referencias oficiales para esta guía: Lovable Cloud, Lovable Resend connector, Lovable Telegram connector. Documentación de Formgong, Dónde se guardan los datos.

Leer en Markdown
← Volver al blog