Comment créer une application de formulaires

Un générateur de formulaires permet aux gens de concevoir leurs propres formulaires : choisir des champs, définir des règles, publier un lien, puis recueillir les réponses. Techniquement, il repose sur trois éléments : une définition de formulaire stockée sous forme de données, un moteur d'affichage qui transforme la définition en formulaire fonctionnel, et un espace de stockage des réponses avec notifications et exportation. Avant d'en construire un, vérifiez que vous en avez vraiment besoin : si vous voulez seulement un formulaire de contact ou de candidature, créez directement ce formulaire et passez complètement le générateur.

Avez-vous vraiment besoin d'un générateur?

Votre situation	Construisez ceci
Un ou deux formulaires qui changent rarement	Les formulaires eux-mêmes. Voir comment ajouter un formulaire de contact.
Beaucoup de formulaires, créés par des non-développeurs dans votre équipe	Un générateur de formulaires interne
Les formulaires font partie de votre produit (les clients les créent)	Un générateur avec comptes, limites et intégration
Vous voulez surtout des résultats de sondage et des graphiques	Une application de sondage

Un générateur est un projet plus important qu'un formulaire, car chaque type de champ doit fonctionner dans l'éditeur, dans le formulaire public, dans la validation, dans le stockage, dans les notifications et dans l'exportation.

Ce dont un générateur de formulaires a besoin

Définitions de formulaires

Enregistrez chaque formulaire comme une liste de champs, sous forme de données structurées (du JSON dans une colonne Postgres fonctionne bien). Un champ pourrait ressembler à ceci :

id, un identifiant stable qui ne change jamais, même si l'étiquette change
type : texte, courriel, nombre, texte long, liste de choix, case à cocher, date, fichier
étiquette et texte d'aide
obligatoire, min / max, types de fichiers permis
options pour les listes de choix
ordre, et au besoin une condition (« afficher seulement si le champ X vaut Y »)

L'éditeur modifie cette liste; le formulaire public la lit. C'est toute l'astuce : aucun nouveau code par formulaire.

Réponses

Réponses : formulaire, version du formulaire, heure de soumission, réponses classées par identifiant de champ, statut (nouvelle, lue, archivée).
Fichiers : les fichiers téléversés doivent être placés dans le stockage de fichiers, la réponse ne contenant qu'une référence, jamais à l'intérieur de la ligne de la base de données.

Décisions et compromis

Gestion des versions. Quelqu'un finira par renommer « Téléphone » en « Numéro de cellulaire » après 200 réponses. Si les réponses sont enregistrées par identifiant de champ et que chaque réponse note la version du formulaire, les anciennes réponses s'affichent toujours correctement. Sans cela, vos données se brouillent silencieusement.

La validation se fait deux fois. Vérifiez les champs dans le navigateur pour une rétroaction rapide, puis à nouveau sur le serveur, car n'importe qui peut envoyer des données directement à votre point de terminaison. La vérification serveur est celle qui compte.

Téléversements de fichiers. Ils entraînent des coûts de stockage, des limites de taille, des vérifications de type de fichier et des questions de confidentialité (CV, pièces d'identité, formulaires médicaux). Limitez les types et les tailles, et rendez les fichiers téléversés privés par défaut, lisibles seulement par les propriétaires du formulaire. Voir comment ajouter le téléversement de fichiers à votre application.

Notifications. « Envoyez-moi un courriel quand quelqu'un soumet un formulaire » est attendu. Cela demande un fournisseur de courriel et une clé d'API; voir comment envoyer des courriels depuis votre application.

Pourriel. Un formulaire public sera découvert par des robots. Utilisez un champ piège (caché pour les personnes, rempli par les robots), des limites de requêtes par adresse IP, une validation côté serveur et, au besoin, un service CAPTCHA.

Intégration. Une intégration par iframe est la façon la plus simple et la plus sûre de placer un formulaire sur le site web de quelqu'un d'autre. Une intégration par script semble plus naturelle, mais elle est plus difficile à construire et à sécuriser.

Logique conditionnelle. « Afficher ce champ seulement si… » est populaire et multiplie les tests. Ajoutez-la une fois les bases solides.

Une première invite qui fonctionne

Crée une application de générateur de formulaires pour mon équipe. Les utilisateurs connectés créent des formulaires dans un éditeur avec un aperçu en direct. Types de champs : texte court, texte long, courriel, nombre, date, liste de choix unique, cases à cocher et téléversement de fichier. Chaque champ a un identifiant stable, une étiquette, un texte d'aide, un indicateur obligatoire et des règles propres au type (min/max, options, types de fichiers permis et une limite de taille de 10 Mo). Enregistre la définition du formulaire en JSON avec un numéro de version qui augmente à chaque publication. Chaque formulaire obtient un lien public et un code d'intégration par iframe. Valide les réponses sur le serveur selon la version publiée, enregistre les réponses classées par identifiant de champ avec la version du formulaire, et place les fichiers téléversés dans un stockage de fichiers privé. Ajoute un champ piège caché et une limite de requêtes par adresse IP. Les propriétaires du formulaire voient un tableau des réponses avec statut (nouvelle, lue, archivée), une vue détaillée et une exportation CSV. Enregistre tout dans une base de données. Laisse la logique conditionnelle et les notifications par courriel pour plus tard.

Étapes de construction

Éditeur et définition. Construisez un formulaire avec chaque type de champ et examinez le JSON enregistré avec l'agent. Est-il propre et stable?
Formulaire public. Remplissez-le sur un téléphone. Vérifiez les messages de validation et l'écran de confirmation.
Validation serveur. Demandez à l'agent d'envoyer directement au serveur une réponse qui enfreint les règles, en contournant la page. Elle devrait être rejetée.
Gestion des versions. Renommez et réordonnez les champs après quelques réponses. Les anciennes réponses devraient toujours afficher les bonnes valeurs.
Téléversements. Essayez un fichier trop gros et un fichier du mauvais type. Confirmez qu'un inconnu ne peut pas ouvrir un fichier téléversé en devinant son lien.
Tableau des réponses et exportation. Vérifiez l'exportation CSV avec des virgules, des sauts de ligne et des caractères accentués dans les réponses.
Notifications, intégrations, logique. Ajoutez-les une à la fois.

Erreurs courantes

Enregistrer les réponses par étiquette. Les étiquettes changent. Utilisez des identifiants de champs stables.
Validation seulement dans le navigateur. C'est un confort, pas une protection.
Fichiers téléversés publics. Les formulaires recueillent souvent des documents que les gens ne voudraient pas exposer.
Aucune protection contre le pourriel. Un formulaire public peut se remplir de déchets en quelques jours.
Construire un générateur pour un seul formulaire. Construisez le formulaire.
Soumissions illimitées sur un produit public. Si les clients créent des formulaires, fixez des limites par forfait, sinon un formulaire populaire peut faire grimper votre facture d'hébergement.

Quand un produit prêt à l'emploi est le meilleur choix

Les outils de formulaires hébergés sont excellents et peu coûteux pour la plupart des besoins. Ils ont déjà résolu l'intégration, le pourriel, les paiements, les intégrations et l'accessibilité pour des dizaines de types de champs. Si votre équipe a seulement besoin de formulaires, utilisez-en un : voir alternatives à Typeform et alternatives à Google Forms.

Construisez le vôtre lorsque les réponses doivent vivre à côté de vos propres données (alimenter un CRM ou un portail client que vous exploitez), lorsque vous avez besoin de flux de travail après la soumission que les outils ne permettent pas, lorsque l'emplacement ou la propriété des données est une exigence, ou lorsque les formulaires sont une fonctionnalité d'un produit que vous vendez.

Construire avec Mythex

Sur Mythex, vous décrivez le générateur dans le clavardage et vous testez l'éditeur et le formulaire public côte à côte dans l'aperçu en direct. Mythex ajoute une base de données dédiée aux définitions de formulaires et aux réponses, et active automatiquement le stockage de fichiers lorsque votre application a besoin de téléversements (limité à 1 Go dans le forfait gratuit). Les courriels de notification passent par un fournisseur que vous connectez avec votre propre clé. Publiez l'application à un lien mythex.ai, ou à votre propre domaine avec le forfait Pro, et les liens des formulaires publics fonctionnent à partir de là.

Questions

Comment un générateur de formulaires enregistre-t-il les formulaires?

Habituellement sous forme de définition de formulaire : une liste de champs, chacun avec un type, une étiquette, des règles de validation et un ordre, enregistrée comme données structurées, comme du JSON. La même définition alimente à la fois l'éditeur et le formulaire public; ajouter un champ ne demande donc aucun nouveau code.

Comment enregistrer les réponses soumises?

Enregistrez chaque réponse avec une référence à la version du formulaire utilisée et les réponses classées par identifiant de champ. Ainsi, renommer ou réordonner un champ plus tard ne brise pas les anciennes réponses.

Comment empêcher le pourriel sur un formulaire public?

Combinez un champ piège caché (honeypot), une limite de requêtes par adresse IP, une validation côté serveur et, si le pourriel persiste, un service CAPTCHA. Ne vous fiez jamais uniquement aux vérifications faites dans le navigateur.

Ai-je besoin d'un générateur de formulaires complet ou simplement d'un formulaire?

Si vous avez besoin d'un ou deux formulaires fixes, créez directement ces formulaires : c'est beaucoup plus simple. Un générateur de formulaires vaut la peine lorsque des personnes non techniques doivent créer et modifier de nombreux formulaires sans demander à un développeur.