Étape 10 · Créer une page web et un petit outil
Recueillir des réponses sur ta page, en respectant le RGPD
Suivre cette leçon avec le compagnon dans Claude Code
/formation-ia:suivre m10-l061. À la fin de cette leçon, tu sauras
- Expliquer pourquoi une page simple ne peut pas garder des réponses toute seule.
- Choisir entre un lien vers un formulaire en ligne et un formulaire intégré relié à un service.
- Ne demander que le nécessaire et écrire une mention d’information claire.
- Tester ton formulaire de bout en bout, puis nettoyer les réponses de test.
2. Pourquoi ça t’intéresse
Fatou, qui anime l’atelier de couture solidaire du samedi, a sa page en ligne depuis la leçon 2. Maintenant, les gens lui écrivent pour réserver une machine. Elle veut un formulaire : prénom, créneau, niveau. Dans son élan, elle ajoute adresse, date de naissance et « comment avez-vous connu l’atelier ». Une participante lui demande : « Pourquoi vous avez besoin de ma date de naissance ? » Fatou n’a pas de réponse. Un bon formulaire, c’est trois champs utiles, quatre lignes d’explication, et des réponses qui arrivent au bon endroit.
3. Avant de commencer
| Il te faut | Ta page publiée (leçons 1 et 2), ses fichiers fiche-projet.md et idees.md, un point de sauvegarde (leçon 5) |
| Coût | Les services de formulaires courants ont une offre gratuite ; vérifie les conditions du jour sur leur site |
| Durée | 45 à 60 min |
4. Comprendre en 3 minutes
Ta page est une affiche : elle montre, elle ne range rien. Pour recueillir des réponses, il faut une boîte aux lettres, c’est-à-dire un service qui les reçoit et les garde.
Deux façons de faire, de la plus simple à la plus intégrée :
| Option | Comment | Pour qui |
|---|---|---|
| Lien vers un formulaire en ligne | Tu crées le formulaire chez un service connu (par exemple Google Forms ou Microsoft Forms) et ta page affiche un bouton qui y mène | Le plus simple, rien à changer dans le code |
| Formulaire intégré à la page | Les champs sont dans ta page ; à l’envoi, les réponses partent vers un service qui les reçoit : la fonction de formulaires de certains hébergeurs, un service spécialisé, ou ton n8n (module 9) | Plus joli, un peu plus de réglages |
Dans les deux cas, tu deviens responsable des données que tu recueilles. Le RGPD, le règlement européen sur les données personnelles, se résume ici à trois réflexes :
- Le strict nécessaire. Chaque champ doit servir l’usage annoncé. Pas de case « au cas où ».
- Une mention d’information près du bouton d’envoi : qui collecte, pour quoi faire, combien de temps les données sont gardées, qui les voit, et comment demander leur consultation ou leur suppression.
- Pas de case précochée. Si tu proposes de recevoir des nouvelles, c’est une case à part, vide par défaut.
Pour les règles complètes et des modèles de mentions, la référence en France est le site de la CNIL (cnil.fr).
5. Faire ensemble
Étape 1 · Choisir les champs
Lance claude dans le dossier de ta page :
Je veux ajouter un formulaire à ma page pour : [l'usage, par exemple réserver une place à l'atelier].
Voici les champs auxquels je pense : [ta liste].
Pour chaque champ, dis-moi s'il est nécessaire à cet usage, facultatif ou à supprimer, et pourquoi. Ne modifie aucun fichier.
Garde seulement le nécessaire. Note tes choix dans fiche-projet.md.
Étape 2 · Rédiger la mention d’information
Rédige une mention d'information de 4 à 6 lignes, en langage simple, pour ce formulaire.
Responsable : [ton nom ou celui de l'association]. Usage : [l'usage]. Durée de conservation : [par exemple jusqu'à la fin de la saison].
Indique qui voit les réponses et comment demander leur consultation ou leur suppression, avec mon contact public.
Compare avec les conseils de cnil.fr et ajuste.
Étape 3 · Créer le formulaire et le relier
- Pose un point de sauvegarde.
- Option lien : crée le formulaire chez le service choisi, en suivant son aide officielle, colle la mention en haut du formulaire, puis :
Ajoute dans index.html, juste après les informations pratiques, un bouton « Réserver ma place » qui ouvre cette adresse : [adresse de ton formulaire]. Ne change rien d'autre.
- Option intégrée : suis la documentation du service qui recevra les réponses, puis demande à l’agent d’ajouter le formulaire en respectant exactement ce qu’elle indique, avec une étiquette visible pour chaque champ et la mention juste au-dessus du bouton d’envoi.
Étape 4 · Tester de bout en bout
- Ouvre ta page publiée sur ton téléphone.
- Envoie deux réponses fictives (« Test Dupont »), dont une avec un champ obligatoire vide.
- Vérifie que la réponse valide arrive bien chez le service, et que la réponse incomplète affiche un message compréhensible.
- Supprime les réponses de test.
6. Faire toi-même
Ajoute à ta propre page un formulaire utile : réservation, inscription, demande de devis, sondage de date, retour sur un événement.
Consigne : trois à cinq champs au maximum, chacun justifié ; une mention d’information complète ; une case de consentement séparée et décochée si tu veux recontacter les gens pour autre chose ; deux tests sur téléphone ; réponses de test supprimées. Ajoute une ligne à CHANGELOG.md.
Résultat attendu : un formulaire en ligne sur ta page, qui recueille uniquement le nécessaire et dit clairement ce que deviennent les réponses.
Piège fréquent : oublier où arrivent les réponses. Un formulaire qui marche mais dont personne ne lit les réponses, c’est pire que pas de formulaire. Décide qui les consulte, et à quel rythme, avant de publier.
7. Vérifier
- Chaque champ du formulaire répond à l’usage annoncé ; aucun champ « au cas où ».
- La mention dit qui collecte, pourquoi, combien de temps, qui voit les données, et comment demander leur suppression.
- Aucune case n’est précochée.
- Une réponse de test envoyée depuis mon téléphone est bien arrivée.
- Les réponses de test ont été supprimées.
- Je sais qui lit les réponses et à quel rythme.
8. Ce que tu gardes
Dans ton carnet de bord, les trois réflexes : le strict nécessaire, une mention claire, rien de précoché. Note aussi la durée de conservation choisie, avec une date dans ton agenda pour supprimer les anciennes réponses.
9. Pour aller plus loin
- Relie les réponses à un tableur avec n8n, comme à la leçon 6 du module 9.
- La CNIL (cnil.fr) propose des fiches pratiques pour les associations et les petites structures.
Vérifie ta compréhension
3 questions, sans note. L'explication s'affiche après ta réponse.
Pour vérifier par toi-même : cnil.fr, developer.mozilla.org, code.claude.com