Prompt pour Lovable et Bolt
Collez ce prompt dans Lovable ou Bolt. Il demande un formulaire de contact vers Formgong et dit à l’outil de ne pas ajouter de base ni de service d’e-mail.
Ce que vous copiez
Ce modèle est un prompt pour Lovable ou Bolt. Vous le collez dans le chat du constructeur. Le constructeur écrit le formulaire. Formgong reçoit l’envoi.
Le prompt nomme le point de terminaison, la clé d’accès publique, _lang, le honeypot et la vérification de succès. Il dit au constructeur de ne pas ajouter de backend.
Il dit aussi de ne pas ajouter Resend, une base de données, une edge function ou une server action pour ce formulaire. Ce sont des détours fréquents dans les applications générées.
Le bloc supplémentaire est du HTML simple qui correspond au prompt. Utilisez-le si vous préférez coller le balisage plutôt que demander au constructeur de l’écrire.
Des guides plus longs, propres à chaque outil, existent déjà pour Lovable et pour Bolt. Cette page est le prompt court. Ces pages expliquent les clics autour.
Quoi vérifier dans le diff
Le formulaire doit envoyer vers /submit sur l’origine Formgong. Si vous voyez une nouvelle table, un secret ou un SDK d’e-mail, demandez au constructeur de les retirer.
La clé d’accès dans le prompt est fk_your_access_key jusqu’à ce que vous créiez un formulaire. Remplacez-la, ou utilisez le bouton de cette page pendant que vous êtes connecté.
Les noms de champs doivent rester name, email et message, avec phone facultatif. Telegram imprime ces noms. Un champ renommé est plus difficile à parcourir.
botcheck doit être présent, vide et caché. Si le constructeur le supprime comme inutilisé, remettez-le. C’est le honeypot.
Fetch doit envoyer Accept: application/json. Un corps JSON a aussi besoin de Content-Type: application/json. FormData ne doit pas définir cet en-tête.
Le prompt dit de passer Turnstile sauf si vous fournissez une clé de site. Ne laissez pas le constructeur inventer une clé.
Le prompt dit de ne pas charger une police tierce pour le formulaire. Si l’application a déjà une police, le formulaire peut en hériter.
Après que le constructeur a fini
Publiez, ou utilisez l’aperçu du constructeur s’il peut atteindre internet, et envoyez un test. Puis ouvrez la boîte de réception Formgong.
Connectez Telegram dans les réglages du formulaire pour une livraison immédiate. Sur la formule gratuite, l’e-mail est un résumé quotidien.
Le gratuit conserve 300 soumissions par mois pendant 30 jours, dans l’UE. Le spam est stocké et n’est pas livré, et il ne compte pas.
Des réglages tels que les destinataires et Telegram vivent dans Formgong. Vous pouvez les changer sans demander au constructeur de régénérer le formulaire.
Formgong est l’opérateur. Si le produit se comporte mal, écrivez à support@formgong.com. Le compte du constructeur lui-même est un chemin d’assistance séparé.
Aperçu
Code du formulaire
Ajoutez un formulaire de contact à ce projet. Les envois vont vers Formgong. N’ajoutez pas de base de données, d’edge function, de server action ni de service d’e-mail tel que Resend.
Consignes :
- Un formulaire simple peut utiliser action="https://formgong.com/submit" et method="POST". Avec JavaScript, envoyez les mêmes champs à https://formgong.com/submit avec fetch.
- Champ caché name="access_key" value="fk_your_access_key". La clé est publique. Laissez-la dans le frontend. Ne la déplacez pas dans un secret.
- Champ caché name="_lang" value="{lang}". Formgong s’en sert pour la page de remerciement et le texte d’erreur. Sur un site multilingue, mettez la langue de la page.
- Champs : name, email avec type="email", et message. Les trois sont obligatoires. phone est facultatif. Gardez ces noms. Telegram affiche chaque nom en gras au-dessus de la réponse.
- Honeypot : un champ type="text" name="botcheck" tabindex="-1" autocomplete="off" dans un conteneur avec aria-hidden="true". Cachez-le en CSS : position:absolute; inset-inline-start:0; top:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%). Ne le remplissez pas.
- Succès avec fetch : en-tête Accept: application/json. Pour un corps JSON, envoyez aussi Content-Type: application/json. Pour FormData, ne définissez pas Content-Type. Si success vaut true dans le JSON, montrez un court remerciement et videz le formulaire. Sinon, montrez le message de la réponse.
- Turnstile seulement si une clé de site est fournie : script src="https://challenges.cloudflare.com/turnstile/v0/api.js" et un div avec class="cf-turnstile" et data-sitekey. Sinon, ne l’ajoutez pas.
- Ne chargez pas une police tierce. N’ajoutez pas d’envoi de fichiers.
- L’origine du point d’accès est https://formgong.com.HTML simple demandé par le 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="fr"> <label>Nom <input type="text" name="name" autocomplete="name" required></label> <label>E-mail <input type="email" name="email" autocomplete="email" required></label> <label>Téléphone <input type="tel" name="phone" autocomplete="tel"></label> <label>Message <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>Laissez ce champ vide <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <!-- Facultatif. Activez Turnstile pour ce formulaire, retirez ces marques de commentaire et collez la clé du site. <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="fr"></div> --> <button type="submit">Envoyer</button> </form>
Questions et réponses
Ce prompt fonctionne-t-il à la fois dans Lovable et dans Bolt ?
Oui. Il ne dépend pas d’une seule disposition de fichiers. Si le constructeur choisit React, Vue ou du HTML simple, le même point de terminaison et les mêmes champs s’appliquent encore.
Le constructeur a ajouté Supabase ou Resend. Et maintenant ?
Demandez-lui de supprimer ce code et de ne garder que l’envoi vers Formgong. Les guides Lovable et Bolt liés décrivent la même correction plus en détail.
La clé d’accès est-elle sûre dans le prompt ?
C’est une clé publique. N’importe qui peut envoyer une soumission avec elle. On ne peut pas lire votre boîte de réception ni changer la destination du courrier.
Où sont les guides plus longs ?
Sur les pages Lovable et Bolt, sous For, liées depuis cette page. Ce modèle est le prompt lui-même, pas un remplacement de ces guides.