Ce que vous allez créer
À la fin de ce guide, vous disposerez d’un formulaire entièrement hébergé en dehors de l’interface de Formaloo (une page HTML écrite à la main, un site Webflow, une application React ou une page générée par un agent de code IA) qui envoie pourtant ses soumissions directement dans ce même formulaire. Chaque soumission arrive au même endroit qu’une soumission native. Votre design vous appartient à 100 %. Formaloo se charge simplement du stockage en arrière-plan.
Quand utiliser cette fonctionnalité
Votre formulaire Formaloo intégré ou hébergé ne correspond pas au design de votre site, et la personnalisation du thème ne vous mène qu’à 80 % du résultat souhaité
Vous briefez un agent de code IA comme Claude Code ou Codex pour créer un formulaire et ne souhaitez pas, en plus, mettre en place un backend ou une base de données
Vous souhaitez dépasser les limites d’une intégration Formaloo et créer une page parfaitement native sur votre site, avec un contrôle total du design et de l’expérience.
Vous ajoutez une étape de collecte de données dans votre propre produit et ne souhaitez pas créer et maintenir une table de base de données distincte uniquement pour cela
Configurer Connect your UI
Connect your UI se trouve dans le panneau que vous utilisez déjà pour partager un formulaire : rien de nouveau à installer avant de commencer.
💡 Besoin d’un rappel sur le panneau Share ? Découvrez comment trouver, personnaliser et partager l’URL publique de votre formulaire.
1. Ouvrez Connect your UI : ouvrez votre formulaire dans l’éditeur, cliquez sur Share dans la barre d’outils supérieure, puis sur l’onglet Connect your UI, à côté de Link et Embed.
2. Vérifiez que chaque champ a un ID : le panneau le vérifie automatiquement pour vous. Si tous les champs ont un ID, le message « All fields have an ID. You're ready to connect. » s’affiche. S’il manque un ID à un champ, ce message n’apparaît pas : une erreur vous indique alors qu’un champ n’a pas d’ID. Ouvrez les paramètres de ce champ et ajoutez-en un avant de continuer.
💡 Les ID de champ servent aussi au fonctionnement de la reprise des réponses dans Formaloo. Découvrez comment utiliser la reprise des réponses dans Formaloo pour savoir où ces ID sont également importants.
3. Clé API : la clé API (clé publique) est déjà incluse dans le prompt et peut être utilisée en toute sécurité. N’utilisez et ne partagez en aucun cas l’API Secret, en particulier dans du code frontend/côté client, car son exposition crée un risque de sécurité.
💡 Vous vous demandez ce qu’une clé API Formaloo permet de faire ou non au-delà de cet usage ? Découvrez comment utiliser les clés API Formaloo dans l’API Formaloo.
4. Copiez les instructions et transmettez-les : cliquez sur Copy instructions. Tout ce dont votre développeur ou un agent de code IA a besoin est copié en une seule fois : les champs de ce formulaire, l’adresse d’envoi des données et les règles exactes de formatage. Collez-le dans Claude Code, Codex ou Cursor, ou transmettez-le à un développeur, avec le design que vous souhaitez faire réaliser.
5. Créez, puis vérifiez la réception : une fois que votre interface envoie des soumissions, ouvrez la page Responses du formulaire. Votre première soumission devrait y apparaître en quelques secondes, associée aux bons champs, exactement comme une soumission effectuée via l’interface de Formaloo. Si elle n’apparaît pas, vérifiez à nouveau les ID de champ et la clé API des étapes 2 et 3.
Cas d’usage
Connect your UI ne se limite pas à remplacer le design d’un formulaire : cette fonctionnalité fonctionne partout où les outils de logique, d’e-mail et de PDF de Formaloo sont déjà disponibles. Voici quelques exemples concrets de ce que vous pouvez créer :
Inscriptions à une newsletter ou à une liste d’attente : un bouton d’abonnement sur un site personnel ou une inscription à une liste d’attente sur la page d’accueil d’un produit fait partie des éléments les plus simples à connecter. Une personne saisit son e-mail dans un formulaire que vous avez conçu vous-même, et Formaloo prend le relais : un e-mail de bienvenue est automatiquement envoyé au nouvel abonné, et vous êtes notifié dès qu’une personne s’inscrit. Le même principe s’applique à la réservation d’un appel de démo : la personne qui réserve et votre équipe reçoivent un e-mail dès que le créneau est réservé.
Formulaires personnalisés qui génèrent un document sur-le-champ : créez une page d’accueil à votre image pour un contrat de service ou un contrat de location, par exemple. Une personne renseigne ses informations et les dates concernées, et la logique, les e-mails et la génération de PDF que vous configureriez sur un formulaire Formaloo natif transforment automatiquement cette soumission en contrat finalisé, prêt à être téléchargé ou envoyé. Seule l’interface vous appartient : la partie administrative continue de fonctionner sur Formaloo.
Calculateurs de devis qui envoient instantanément un PDF chiffré par e-mail : les agences et les entreprises de services peuvent créer un calculateur personnalisé à leurs couleurs, dans lequel un client saisit les détails de son projet, comme le périmètre, le calendrier ou les options. La logique de Formaloo calcule le prix, génère un devis PDF et l’envoie directement au client par e-mail, tandis que votre équipe commerciale est notifiée avec les mêmes informations. Le calculateur peut être hébergé sur votre propre site ou dans votre produit, avec le style de votre choix, tandis que Formaloo gère la logique de tarification et les documents en arrière-plan.
ℹ️ Si vous modifiez quoi que ce soit dans votre formulaire, la modification sera également répercutée sur votre nouveau design et sur le site web que vous avez créé à partir de ce formulaire. Vous n’avez rien à faire manuellement : la synchronisation est automatique.
Ce dont vous disposez désormais
Vous disposez désormais d’un formulaire entièrement découplé de l’affichage de Formaloo. Un designer, un développeur ou un agent de code IA travaillant directement à partir des instructions copiées peut créer exactement l’interface dont votre marque a besoin, et chaque soumission arrive toujours dans les réponses sur lesquelles vous vous appuyez déjà. Rien n’a changé côté backend. Seule la façade a changé.
Et ensuite ?
Passez en marque blanche complète maintenant que votre propre interface est en ligne. Votre propre interface gérant désormais le design, l’étape suivante consiste naturellement à supprimer toute trace restante de la marque Formaloo de ce qui est encore hébergé côté Formaloo. → Comment supprimer la marque Formaloo
Filtrez et gérez les soumissions à mesure qu’elles arrivent de votre nouvelle interface. Lorsque des réponses commencent à arriver d’une autre source que l’interface de Formaloo, il est utile de savoir les trier et les filtrer avec le reste de vos données. → Comment trier et filtrer les données de vos soumissions
Modèles prêts à l’emploi
Inutile de partir de zéro : nous l’avons déjà préparé pour vous.
Formulaire de qualification et de scoring de leads par IA : collecte et évalue les leads entrants grâce à l’IA. Remplacez le formulaire hébergé par votre propre interface à votre image chaque fois que le design doit correspondre exactement à un site marketing.
Estimateur de coûts de services pour les agences : permet aux clients d’estimer le coût d’un projet avant de réserver un appel. Les agences qui ont besoin que ce calculateur corresponde au design de leur site sont précisément le public visé par Connect your UI.
Système d’inscription et de billetterie pour événements : gère en arrière-plan les limites de capacité, les billets PDF et un portail d’administration. Reconstruisez uniquement la page d’inscription dans votre propre interface et conservez le reste du workflow tel quel.
Autres tutoriels
Découvrez un workflow complet auquel cette même technique s’applique. Ce système de qualification de leads est un bon exemple de formulaire à reconstruire avec votre propre interface une fois la logique de scoring et de routage en place. → Comment créer un système de qualification de leads alimenté par l’IA dans Formaloo
Appliquez-le à un cas d’usage pour les agences. Un estimateur de coûts se trouve sur une page destinée aux clients, où la maîtrise du design compte autant que la logique de calcul en arrière-plan. → Comment créer un estimateur de coûts de services qui envoie aux clients le détail des prix par e-mail
Découvrez le côté workflow d’un formulaire à reconstruire en headless. Les pages d’inscription aux événements sont souvent la partie la plus sensible au design d’un site marketing, tandis que les limites de capacité et les confirmations restent entièrement gérées en backend. → Comment collecter des inscriptions à un événement, gérer la capacité et envoyer des confirmations automatiques