Formulaire.

01

Deux champs.

Le point de contact de l’accueil, refait le 12 octobre : une grille de la trame. La tête sur toute la largeur, dans une cellule pâle où des cases s’allument ; dessous, deux portes de même rang, le formulaire court et l’agenda. Le formulaire : un e-mail, un type de projet, un bouton, et une mention quand il y en a une.

Emploi

Le formulaire court, en bas de l’accueil et de toute page qui finit par une conversation.

Moment

Une fois par page, dans une Section de classe tr-contact ; avec un suffixe si la page a déjà un formulaire.

Jamais

Avec un champ de plus pour commencer, ni un bouton qui parle d’argent.

<Section classe="tr-contact" titreId="contact-spec">
  <Contact etiquette={V3.contact.surtitre} titre={V3.contact.titre} sousTitre={V3.contact.sousTitre} corps={V3.contact.corps}
    cta={V3.cta} types={V3.contact.types} titreId="contact-spec" suffixe="spec" />
</Section>

02

Le reste, replié.

Le formulaire complet de la page contact (section #ecrire) : les deux mêmes champs, puis un pli « Le reste, si vous voulez » avec quatre champs facultatifs. La page le pose sous une tête centrée, entre les sept carrés de .tr-cellules. Il garde l’assemblage des deux portes d’avant le 12 octobre (.tr-portes), que le point de contact a quitté.

<Formulaire cta={V3.cta} types={V3.contact.types} suffixe="spec2" />

<Section classe="tr-contact" id="ecrire" titreId="tr-ecrire">
  <div class="tr-cellules" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
  <Tete variante="centre" etiquette={C.formulaire.etiquette} titre={C.formulaire.titre} sousTitre={C.formulaire.lead} id="tr-ecrire" />
  <Formulaire cta={V3.cta} types={V3.contact.types} />
</Section>

03

Les libellés.

Les libellés sont dans le composant, les types de projet dans V3.contact.types, le bouton dans V3.cta. Le label est en voix technique, le champ en texte courant.

Le suffixe des identifiants vaut « trame » sur l’accueil et « contact » dans le formulaire complet. Quand une page pose deux formulaires, elle passe un suffixe à chacun : c’est ce que fait cette page, avec spec, spec2 et spec3.

04

La seconde porte.

Deux portes de même rang, décidées au grill du 9 octobre : laisser son e-mail, ou réserver directement un créneau. L’agenda a son lien depuis le 9 octobre (V3.contact.agenda) : sa porte est la cellule de droite, avec la phrase des trente minutes (V3.contact.corps) puis le bouton. Sans lien, la porte disparaît : la phrase revient sous le titre, et le formulaire prend toute la largeur.

<Contact etiquette={V3.contact.surtitre} titre={V3.contact.titre} sousTitre={V3.contact.sousTitre} corps={V3.contact.corps}
  cta={V3.cta} types={V3.contact.types} agenda={null} />
<!-- Sans la prop agenda, le composant lit V3.contact.agenda : le lien de l'agenda, donné par JB le 9 octobre. À null, la porte disparaît. -->

05

Où ça part.

Depuis le 12 octobre, les formulaires partent par le relais du serveur (server/formulaire.mjs) : la page poste la demande en JSON, le relais la vérifie puis l’envoie par e-mail avec l’API de Brevo, et le visiteur arrive sur /merci/, qui n’est pas indexée. Ni fichier ni base : le relais garde seulement en mémoire de quoi compter les envois et repérer les doublons.

Ce que la page envoie

Le script vérifie l’e-mail avec la règle du relais, la même expression des deux côtés (MAIL) : 254 caractères au plus ; lettres, chiffres et . _ + ' - (l’apostrophe droite) avant l’arobase, sans point au début, à la fin ni doublé ; un domaine avec au moins un point. Seul l’e-mail est exigé. Puis il poste à /api/contact un objet JSON (Content-Type application/json), les valeurs nettoyées comme le relais le ferait (espaces autour et caractères de contrôle retirés, sauts de ligne gardés dans le contexte), sauf le champ piège, envoyé tel quel. Il attend la réponse 25 s au plus.

Ce que le relais répond

Un mot, en texte, que la page lit avec le statut : 200 avec « ok » ou « ok-filtre », 429 avec « limite ». Tout le reste donne le texte erreur, y compris un 200 ou un 429 qui ne porte pas ce mot, comme une page HTML de nginx.

06

Les états.

Le bouton reste actif et rien ne se valide à la frappe : à l’envoi, la page dit ce qui manque, puis ce qui se passe. Les textes sont ceux de P.formulaire (pages-v3.ts, tenu par Sémantique) ; {email} y devient un lien mailto vers MARQUE.courriel, et la variante sansEmail sert si l’adresse vaut null.

07

Le piège et le repli.

Deux cas que le script ne règle pas seul : le robot qui remplit tous les champs, et le visiteur sans JavaScript.

Le champ piège

Un champ site_web (input type text, tabindex -1, autocomplete off), sans libellé, dans un conteneur aria-hidden (.tr-form__piege) posé à 10 000 px à gauche : un visiteur ne le voit pas, ne l’atteint pas au clavier, un lecteur d’écran ne le lit pas. Rempli, c’est un robot : le script l’envoie tel quel, le relais répond ok-filtre sans rien envoyer, et le robot arrive sur /merci/ comme un visiteur. C’est le dernier champ du formulaire, pour fermer le message du repli sans script.

Sans script

08

En ligne, en local.

Le relais tourne dans le conteneur du site, à côté de nginx : server/demarrer-formulaire.sh le lance sous l’utilisateur nginx et le relance s’il s’arrête. Il ne lit ses réglages que dans l’environnement : la clé Brevo n’est ni dans le dépôt ni dans les pages. Le pas-à-pas est dans DEPLOY.md.

À poser dans Dokploy, avant le déploiement

Dans l’onglet Environment de l’application :

Sans les deux premières, ou avec une adresse invalide, le relais démarre incomplet et répond 503 à toute demande valide : le visiteur voit le texte erreur. Après le déploiement, /api/contact/etat répond « pret » (« incomplet » si une variable manque ou n’est pas une adresse valide, 502 si le relais ne tourne pas) ; puis un envoi depuis /contact/ doit mener à /merci/, et l’e-mail arriver. Si le journal du conteneur dit que Brevo refuse l’envoi (401), la clé est fausse, ou l’adresse IP du serveur n’est pas encore autorisée dans Brevo.

En développement

astro.config.mjs passe /api au relais lancé à part sur 127.0.0.1:8787 (vite.server.proxy) : le serveur de développement seulement, le build n’en garde rien ; en ligne, c’est nginx. Sans relais, les formulaires du serveur de développement affichent le texte erreur. Le relais se lance avec une fausse clé et un faux Brevo (DEPLOY.md, En local). Parmi les adresses locales, il n’admet par défaut que http://localhost:4321, le port d’astro dev : sur un autre port, comme 4410, le lancer avec FORMULAIRE_ORIGINES=http://localhost:4410, sinon il répond 403 et la page affiche le texte erreur.