Prompt para Lovable y Bolt
Pegue este prompt en Lovable o Bolt. Pide un formulario de contacto que envía a Formgong y dice al constructor que no añada una base de datos ni un servicio de correo.
Qué estás copiando
Esta plantilla es un prompt para Lovable o Bolt. Lo pegas en el chat del constructor. El constructor escribe el formulario. Formgong recibe el envío.
El prompt nombra el endpoint, la clave de acceso pública, _lang, el honeypot y la comprobación de éxito. Le dice al constructor que no añada un backend.
También dice que no añada Resend, una base de datos, una edge function ni una server action para este formulario. Son desvíos habituales en las aplicaciones generadas.
El bloque extra es HTML plano que coincide con el prompt. Úsalo si prefieres pegar el marcado antes que pedirle al constructor que lo escriba.
Ya hay guías más largas, específicas de cada herramienta, para Lovable y para Bolt. Esta página es el prompt corto. Esas páginas explican los clics que lo rodean.
Qué revisar en el diff
El formulario debe enviarse a /submit en el origen de Formgong. Si ves una tabla nueva, un secreto o un SDK de email, pídele al constructor que los quite.
La clave de acceso del prompt es fk_your_access_key hasta que crees un formulario. Sustitúyela, o usa el botón de esta página con la sesión iniciada.
Los nombres de los campos deben quedarse en name, email y message, con phone opcional. Telegram imprime esos nombres. Un campo renombrado se lee peor.
botcheck tiene que estar, vacío y oculto. Si el constructor lo borra porque le parece que no se usa, vuelve a ponerlo. Es el honeypot.
Fetch debe enviar Accept: application/json. Un cuerpo JSON también necesita Content-Type: application/json. FormData no debe poner esa cabecera.
El prompt dice que se salte Turnstile salvo que tú des una clave de sitio. No dejes que el constructor invente una clave.
El prompt dice que no se cargue una fuente de terceros para el formulario. Si la aplicación ya tiene una fuente, el formulario puede heredarla.
Cuando el constructor termina
Publica, o usa la vista previa del constructor si puede llegar a internet, y envía una prueba. Luego abre la bandeja de Formgong.
Conecta Telegram en los ajustes del formulario para una entrega inmediata. En el plan gratuito, el email es un resumen diario.
El gratuito guarda 300 envíos al mes durante 30 días, en la UE. El spam se almacena y no se entrega, y no cuenta.
Ajustes como los destinatarios y Telegram viven en Formgong. Puedes cambiarlos sin pedirle al constructor que regenere el formulario.
Formgong es el operador. Si el producto se porta mal, escribe a support@formgong.com. La cuenta del propio constructor es un camino de soporte aparte.
Vista previa
Código del formulario
Añade un formulario de contacto a este proyecto. Los envíos van a Formgong. No añadas una base de datos, una edge function, una server action ni un servicio de correo como Resend.
Especificación:
- Un formulario simple puede usar action="https://formgong.com/submit" y method="POST". Con JavaScript, envía los mismos campos a https://formgong.com/submit con fetch.
- Campo oculto name="access_key" value="fk_your_access_key". La clave es pública. Déjala en el frontend. No la muevas a un secreto.
- Campo oculto name="_lang" value="{lang}". Formgong lo usa para la página de agradecimiento y el texto de error. En un sitio multilingüe, usa el idioma de la página.
- Campos: name, email con type="email" y message. Los tres son obligatorios. phone es opcional. No cambies estos nombres. Telegram escribe cada nombre en negrita sobre la respuesta.
- Honeypot: un input type="text" name="botcheck" tabindex="-1" autocomplete="off" dentro de un contenedor con aria-hidden="true". Ocúltalo con CSS: position:absolute; inset-inline-start:0; top:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%). No lo rellenes.
- Éxito con fetch: cabecera Accept: application/json. Para un cuerpo JSON envía también Content-Type: application/json. Para FormData no pongas Content-Type. Si success en el JSON es true, muestra un agradecimiento breve y vacía el formulario. Si no, muestra el mensaje de la respuesta.
- Turnstile solo si hay una site key: script src="https://challenges.cloudflare.com/turnstile/v0/api.js" y un div con class="cf-turnstile" y data-sitekey. Si no, no lo añadas.
- No cargues una fuente de terceros. No añadas subida de archivos.
- El origen del endpoint es https://formgong.com.HTML plano que pide el prompt
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="es"> <label>Nombre <input type="text" name="name" autocomplete="name" required></label> <label>Correo electrónico <input type="email" name="email" autocomplete="email" required></label> <label>Teléfono <input type="tel" name="phone" autocomplete="tel"></label> <label>Mensaje <textarea name="message" required></textarea></label> <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>Deja este campo vacío <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <!-- Opcional. Active Turnstile para este formulario, quite estas marcas de comentario y pegue la clave del sitio. <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="es"></div> --> <button type="submit">Enviar</button> </form>
Preguntas y respuestas
¿Este prompt sirve en Lovable y en Bolt?
Sí. No depende de una sola disposición de archivos. Si el constructor elige React, Vue o HTML plano, el mismo endpoint y los mismos campos siguen valiendo.
El constructor añadió Supabase o Resend. ¿Y ahora?
Pídele que borre ese código y deje solo el envío a Formgong. Las guías enlazadas de Lovable y de Bolt describen la misma corrección con más detalle.
¿La clave de acceso es segura dentro del prompt?
Es una clave pública. Cualquiera puede enviar un mensaje con ella. No puede leer tu bandeja ni cambiar adónde va el correo.
¿Dónde están las guías más largas?
En las páginas de Lovable y de Bolt, dentro de For, enlazadas desde esta página. Esta plantilla es el propio prompt, no un sustituto de esas guías.