Affichage

Trois voies mènent au même formulaire, avec des propriétés très différentes en matière de rendu serveur et de personnalisation.

Règle absolue : le bloc du BlockEditor n'appartient pas au module. Il est livré par le start template, dans le code du projet. Un projet qui n'en vient pas doit l'écrire lui-même.

Bloc du BlockEditor

C'est la voie recommandée pour un formulaire posé dans une page CMS.

Le bloc s'ajoute depuis le menu de l'éditeur sous le nom « Formulaire », et se contente de choisir un formulaire dans une liste. Il ne stocke que son identifiant.

Le bloc vit dans le projet

Ses fichiers sont dans le projet, pas dans le module :

components/lrvo/blocks/form/
├── fields.js            métadonnées du bloc, identifiant `form`
├── template.js          vue d'édition, sélecteur de formulaire
├── render.js            rendu public, Server Component
└── FormFields.client.js îlot client, champs et soumission

Son identifiant est form, enregistré par le core sous le type custom:form comme tout bloc personnalisé.

Le module a délibérément renoncé à l'enregistrer lui-même : le rendu d'un formulaire porte la typographie, les couleurs et les espacements du site, et un bloc livré par un package imposerait les siens. En le laissant au projet, chaque site le personnalise sans forker quoi que ce soit.

Voir Blocs personnalisés pour le contrat d'un bloc.

Rendu serveur complet

Le fichier render.js est un Server Component : il charge la définition du formulaire côté serveur, rend le titre et la description en HTML, puis délègue les champs et l'envoi à un îlot client.

Il n'y a donc aucun scintillement de chargement, et le contenu du formulaire est présent dans le HTML initial.

Un formulaire absent ou inactif fait rendre le bloc à vide, sans erreur.

Projet sans ce bloc

Un projet qui n'a pas été généré par @lrvo/start n'a pas ce dossier, et le bloc n'apparaît pas dans l'éditeur. Deux options : recopier les quatre fichiers depuis le start template, ou passer par FormEmbed.

Composant FormEmbed

Pour un formulaire posé dans du code de gabarit plutôt que dans du contenu CMS.

import { FormEmbed } from '@lrvo/module-forms/public';

<FormEmbed slug="contact" showTitle className="max-w-lg" />

C'est un composant client. Il charge la définition du formulaire après le montage, par un appel à la route publique de lecture. Un état de chargement discret est affiché entre-temps.

Le formulaire est donc absent du HTML initial. Sur une page dont l'indexation compte, préférer le bloc.

Un slug inconnu ou un formulaire inactif ne rendent rien, sans erreur ni message.

Le style est celui du module. Seul className sur le conteneur est ajustable, les champs eux-mêmes ne sont pas personnalisables par propriété.

Page publique dédiée

Chaque formulaire est accessible à :

/lrvo/forms/<slug>

Cette page est enregistrée par le module dans core/public-pages, depuis sa sous-entrée ./public-page. L'enregistrement a lieu à l'évaluation de la route /lrvo/[...path], pas au boot du serveur : c'est ce qui permet à FormRenderer, un composant client, d'entrer dans le React Client Manifest de cette route.

Il n'y a rien à câbler à la main dans le projet, mais le câblage existe : npx lrvo-modules sync génère app/.lrvo/public-pages.server.js et la route l'importe. Un projet créé avant @lrvo/core 1.0.70 doit passer un npx lrvo-doctor --fix.

C'est un Server Component. Il rend le formulaire dans le cadre commun des pages publiques du core, le même que servent les partages de fichiers, les prises de rendez-vous et les factures à payer : un visiteur qui rencontre deux de ces pages sur le même site ne doit pas avoir l'impression de changer de site en chemin. Voir Pages publiques.

L'en-tête est celui en barre, réservé aux pages qu'on ouvre pour faire quelque chose : barre collante en haut de l'écran, logo du site à gauche, titre du formulaire au centre, description sous la barre, premier champ tout de suite après. La marque est celle du site, LRVO_NAME, LRVO_LOGO_URL et LRVO_SITE_URL : un formulaire n'a pas d'enseigne à lui. Sans logo configuré, la barre ne porte que le titre.

Un slug inconnu ou un formulaire inactif renvoient une page introuvable.

Cette page sert surtout à vérifier une installation ou à donner un lien direct dans un courriel. Pour une page de contact intégrée au site, préférer le bloc, qui hérite du gabarit et de la navigation du projet.

Le composant FormRenderer

Les trois voies rendent les mêmes champs, via le même composant.

import { FormRenderer } from '@lrvo/module-forms/public';

<FormRenderer form={form} />

Il attend un objet formulaire public, tel que renvoyé par la route publique de lecture ou par getPublicFormById. Il gère les largeurs de champ, les champs techniques anti-robots, l'envoi en multipart, l'état de chargement, la redirection et l'affichage du message de succès ou d'erreur.

Son rendu suit le thème du projet : le bouton d'envoi prend la couleur primary, les cases et boutons radio cochés la couleur accent, les messages de succès et d'erreur les statuts success et danger. La page qui l'accueille doit donc charger @lrvo/core/styles/core.css, ce que fait tout projet généré par @lrvo/start.

L'îlot client du bloc du start template en est une copie, dont le style appartient au projet. C'est ce qui permet de personnaliser le rendu des champs sans toucher au module.

Notes

• Les trois voies passent par le même point de soumission et sont donc soumises aux mêmes contrôles d'origine et anti-robots. Voir Soumissions.
• FormRenderer n'affiche que le message d'erreur général, pas le détail par champ que renvoie le serveur. Une intégration maison peut exploiter ce détail.
• Le sélecteur du bloc liste aussi les formulaires inactifs, marqués comme tels, pour permettre de préparer une page avant d'activer le formulaire.