Donner un vrai backend au formulaire généré par Lovable, Bolt, v0 ou Cursor

Le formulaire généré n'envoie rien

Lovable, Bolt, v0 et Cursor produisent de très bonnes interfaces : champs, validation, bouton, message de remerciement. Mais par défaut, ce bouton ne fait souvent rien d'utile — le gestionnaire affiche le succès immédiatement, sans aucune requête réseau. Les données ne sont enregistrées nulle part.

Autre cas fréquent : l'IA câble elle-même Supabase ou Lovable Cloud. Cela fonctionne, mais pour un simple formulaire de contact, cela entraîne une base de données, des accès à configurer et souvent un service d'email séparé comme Resend. Le test prend une minute : ouvrez les outils du navigateur, onglet Network, et envoyez le formulaire. Sans POST, le formulaire est décoratif — le cas de la majorité des sites générés.

Trois routes réellement utilisables

1. Le backend du générateur. Lovable Cloud ou Supabase avec un connecteur d'email. Pertinent si votre application utilise déjà authentification, tables ou traitements serveur ; superflu pour un formulaire de contact isolé.

2. Un backend hébergé de formulaires. La page envoie un POST à un point d'entrée unique avec une clé publique ; le service conserve les demandes et notifie par email et Telegram. La voie la plus rapide pour une landing ou un site vitrine : ni schéma, ni fonction edge, ni serveur.

3. Votre propre fonction serverless. Contrôle total, responsabilité totale : code, secrets, filtrage du spam et nouvelles tentatives de livraison vous incombent. Justifié quand le formulaire s'inscrit dans une logique plus large. Cet article suit la deuxième route : elle fonctionne à l'identique dans Lovable, Bolt, v0, Cursor et tout générateur produisant du HTML ou du React.

Les critères de choix d'un backend de formulaire

La preuve de réception. Le « merci » affiché ne prouve rien : il faut un stockage des demandes avec leurs états — accepté, livré, spam. Dans Formgong, c'est la boîte de réception avec le détail de livraison par canal.

La protection anti-spam. Un honeypot au minimum ; mieux avec Turnstile ou captcha en option et une évaluation du spam qui ne consomme pas votre quota mensuel. Les canaux. L'email comme base, Telegram pour réagir vite, des webhooks signés pour les intégrations.

La localisation des données. Avec des clients européens, vérifiez où les demandes sont physiquement stockées : Formgong garde tout sur Cloudflare en juridiction UE — D1, file d'attente et fichiers. Les changements sans reconstruction. Destinataires, redirections et réponse automatique doivent se régler dans un tableau de bord, pas dans un code que l'IA devrait régénérer.

Une seule consigne, quel que soit le générateur

Ouvrez le chat de votre projet et demandez de connecter le formulaire existant en conservant son design. La consigne ci-dessous convient à Lovable, Bolt, v0 et Cursor ; remplacez fk_your_access_key par la clé affichée dans la connexion du site du formulaire concerné, sur le tableau de bord Formgong.

Elle se limite au texte : pas de téléversement de fichiers, pas de secret de fournisseur d'email ni de token de bot dans le frontend. La clé d'envoi, elle, est publique et peut rester dans le code.

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!"
}

Testez la livraison, pas le message de succès

Une fois les changements appliqués, envoyez une demande de test identifiable et suivez tout le chemin :

1. La requête. L'onglet Network affiche un POST vers https://formgong.com/submit avec success: true dans la réponse.
2. L'enregistrement. La demande apparaît dans la boîte de ce formulaire sur Formgong, avec tous ses champs.
3. L'email. Avec Free, l'e-mail arrive dans le résumé du lendemain matin à 08:00, dans le fuseau du titulaire du compte, pour un destinataire. Avec Pro et Business, chaque demande est envoyée par e-mail. Vérifiez les indésirables.
4. Telegram. Telegram est immédiat sur tous les plans, y compris Free. Si un chat est connecté, le message arrive dans ce chat.

Après publication, recommencez sur le domaine réel : l'aperçu de l'éditeur peut se comporter autrement. Le guide de diagnostic détaille chaque étape.

Après le lancement, changez les réglages sans régénérer

Une fois le formulaire opérationnel, la plupart des changements ne ramènent pas au générateur : destinataires des emails, chats Telegram, redirections après envoi, réponse automatique au visiteur et protections se règlent dans le tableau de bord Formgong.

Si les demandes cessent d'arriver après une refonte, ne devinez pas : le diagnostic de formulaire de Formgong charge votre page et vérifie le snippet installé — adresse, méthode, clé et champs requis. L'analytique du formulaire montre en plus où les visiteurs abandonnent le remplissage : moins coûteux qu'un test A/B et sans code à régénérer.

Les erreurs typiques des formulaires générés

Le succès s'affiche, aucune requête ne part

Le générateur a produit un gestionnaire décoratif. Demandez-lui d'envoyer les données avec fetch et de n'afficher le succès qu'après une réponse success: true.

Le code contient encore fk_your_access_key

C'est un exemple à remplacer par la vraie clé, dans la section de connexion du site de votre formulaire.

Les champs se vident après une erreur

Le visiteur perd son texte. Le gestionnaire doit conserver les valeurs et afficher l'erreur ; précisez-le dans la consigne suivante.

Turnstile activé, formulaire cassé

Le widget doit être ajouté au code et transmettre cf-turnstile-response. Reprenez l'exemple de connexion du tableau de bord après tout changement de protection.

La demande est enregistrée mais aucun email n'arrive

Vérifiez la confirmation de l'email du propriétaire et des destinataires : une adresse non confirmée ne reçoit rien. Le diagnostic de livraison détaille les étapes.