Créer un site professionnel avec l’IA : du brief au test du formulaire
Neaptide · 6 septembre 2026 · 9 min de lecture · Mis à jour: 7 septembre 2026
Du brief à la mise en ligne d’un site d’atelier : mise en page, formulaire, erreurs et SEO. Avec captures originales et exemple interactif à tester.
Dans cet article
Un visiteur choisit un atelier, saisit son email et clique sur Envoyer. La page affiche « Merci », mais personne ne reçoit sa demande. Le site semble terminé alors que sa fonction principale ne marche pas. Commencez donc par définir l’action attendue et la manière de vérifier qu’elle aboutit.
Pour un petit site, rassemblez les faits, décrivez le parcours principal, construisez la page et testez l’affichage ainsi que le formulaire. Après publication, refaites les vérifications à l’adresse publique. L’agent peut écrire le code ; les conditions de l’offre et la validation du résultat demandent toujours votre attention.
L’exemple que nous avons créé
Forma est un atelier de céramique fictif. Notre exemple comprend une offre, un programme et un formulaire d’essai. L’image vient de notre guide précédent ; le tarif de 60 € et les conditions sont inventés. Les cinq illustrations sont des captures de cet exemple en fonctionnement. Le serveur vérifie les demandes sans les enregistrer ni envoyer d’email. Seules les adresses @example.com sont acceptées.
1. Préparer les faits avant le design
« Fais un site moderne » ne précise pas l’essentiel. Notez à qui s’adresse l’atelier, ce que les participants fabriqueront, ce que comprend le prix et quand ils pourront récupérer leur pièce. Conservez les informations confirmées dans un fichier du projet et signalez celles qui manquent. Le modèle ne doit pas les remplacer par une adresse, des avis ou une expérience inventés.
2. Prévoir qui mettra le site à jour
Si l’équipe doit modifier régulièrement le contenu sans intervenir dans le code, prévoyez un éditeur ou un CMS. Un petit site sur mesure peut aussi être un projet de code avec une procédure de publication claire. Pensez à son entretien, pas seulement au premier écran.
Ouvrez le dossier du projet dans un agent capable de travailler sur les fichiers. Demandez d’abord le plan de la page et les informations qui manquent. Voici un brief pour reproduire l’exercice.
Crée un site pédagogique pour l’atelier fictif Forma.
Atelier débutant de 2 heures, 60 € par personne, 8 personnes maximum. Matériaux et cuisson compris. Présente ces conditions comme fictives.
Prévois une offre avec bouton, trois étapes et un formulaire. N’invente ni avis, ni adresse, ni résultats. Utilise l’image du projet. Sur écran étroit, place le texte au-dessus de l’image.
Le formulaire accepte un email @example.com et 1 à 8 participants. Vérifie les champs dans le navigateur et sur le serveur. N’enregistre rien et n’envoie aucun email ; indique-le dans le résultat.
Ajoute une panne simulée avec possibilité de réessayer sans perdre les champs. Commence par les fichiers à modifier et les vérifications à réaliser.3. Lire le premier écran comme un visiteur
Vérifiez qu’un visiteur comprend l’activité, le prix et ce qui est inclus. Cliquez sur le bouton principal pour confirmer qu’il mène bien au formulaire. Dans notre exemple, l’image est placée à côté du texte : on peut modifier le titre sans la refaire. Demandez des corrections précises et sauvegardez une version fonctionnelle après chaque étape importante.
4. Vérifier l’affichage sur une petite largeur
Les colonnes passent l’une sous l’autre et le texte reste lisible. Avant un vrai lancement, ouvrez aussi le site sur un téléphone : affichez le clavier, parcourez les champs et atteignez le bouton. L’aperçu étroit ne vérifie qu’une partie de cette expérience.
Vérifie les formats large et étroit : débordement horizontal, texte coupé, éléments superposés. Parcours les liens et le formulaire au clavier. Corrige chaque problème, puis refais le test concerné.5. Tester trois états du formulaire
Une valeur incorrecte
Saisissez 9 participants. Le formulaire doit expliquer la limite de 1 à 8 près du champ et ne rien envoyer. Le serveur doit également contrôler les données : on peut contourner l’interface et lui adresser directement une requête.
Une panne du serveur
Remettez 2 et activez la panne simulée. Le serveur renvoie HTTP 503. La page signale l’échec et garde les champs. Désactivez la panne pour réessayer.
La confirmation
Une demande valide reçoit HTTP 200. Le résultat précise que les champs sont vérifiés, sans enregistrement ni envoi. Le bouton est désactivé pendant la requête.
Sur un site commercial, choisissez le destinataire : CRM, outil de réservation ou boîte mail. Envoyez un essai et retrouvez-le dans ce système. Une acceptation en file d’attente ne prouve pas la livraison d’un email. Si les tentatives répétées créent des doublons, leur traitement doit aussi être prévu côté serveur.
Le traitement du formulaire a passé 12 tests, portant notamment sur les données valides, les erreurs d’adresse email et de nombre de participants, les formats non acceptés, une requête trop volumineuse et la panne simulée. Ces tests vérifient le fonctionnement de l’exemple ; ils ne mesurent pas sa résistance à une forte charge et ne constituent pas l’audit d’un système de réservation.
6. Publier et vérifier l’adresse publique
Le dépôt de code conserve le projet et l’historique des versions. Le service d’hébergement prépare le site et le rend accessible en ligne. Nous utilisons ici GitHub pour le dépôt et Vercel pour l’hébergement. Un serveur privé virtuel (VPS) séparé n’est pas toujours nécessaire, mais l’hébergeur doit pouvoir exécuter le code qui traite le formulaire.
- Enregistrez une version fonctionnelle et reliez le dépôt à l’hébergement.
- Vérifiez la configuration de compilation et d’environnement. Gardez les secrets d’intégration hors du code public.
- Testez une prévisualisation : liens, erreurs, formulaire et résultat.
- Reliez le domaine selon les instructions de l’hébergeur et vérifiez HTTPS.
- Recommencez à l’adresse publique et contrôlez la réception chez le destinataire.
Prévoyez le travail de création, l’outil d’IA, le domaine, l’hébergement, le service de formulaire et la maintenance. L’abonnement à l’IA ne représente pas à lui seul le budget du site.
7. Rendre l’offre compréhensible pour le SEO et les réponses IA
Rédigez un titre de page, une description et un titre principal explicites. Répondez dans le texte aux questions sur le public, le prix et la suite d’une demande. Vérifiez les adresses et liens linguistiques des traductions. Les données structurées doivent correspondre au contenu visible.
Des réponses directes et des conditions clairement formulées facilitent la compréhension et la citation, sans garantir de visibilité dans la recherche ou les réponses IA. Le site d’essai porte une directive noindex ; l’article est destiné à être référencé.
Quand faire intervenir un spécialiste
- Paiements, comptes ou réservations avec places limitées.
- Demandes impossibles à suivre jusqu’au destinataire.
- Migration d’un site existant avec conservation des URL.
- Modifications qui cassent régulièrement d’autres éléments.
Apportez le parcours précis et vos résultats de test. Pour un vrai atelier, la vérification se termine quand la personne responsable retrouve la bonne demande dans son outil.