## Fonctionnement du composant `RecaptchaForm` Le composant `RecaptchaForm` est un wrapper autour d’un `
` classique qui gère automatiquement : 1. L’injection du conteneur ReCaptcha (`.r_captcha`) 2. L’état actif ou inactif du formulaire via l’attribut `inert` 3. La récupération et l’injection du token reCAPTCHA dans les données du formulaire 4. L’affichage d’un bandeau d’alerte si les cookies reCAPTCHA ne sont pas encore acceptés --- ### 1. Props principales | Prop | Type | Description | |------|------|-------------| | `onSubmit` | `(e: FormEvent) => void` | Callback appelé au submit avec le token déjà injecté dans `data["g-recaptcha-response"]`. | | `data` | `TFormData & { "g-recaptcha-response"?: string }` | Objet représentant les données du formulaire. Le token reCAPTCHA y est ajouté automatiquement. | | `children` | `React.ReactNode` | Champs et éléments du formulaire. | | `banner` | `BannerClassName` | Optionnel. Permet de personnaliser le bandeau d’alerte affiché si le reCAPTCHA n’est pas activé. | | `classNames` | `{ wrapperClassName?: string; formClassName?: string; }` | Optionnel. Permet de passer des classes CSS personnalisées pour le wrapper et le ``. | --- ### 2. Comportement - **Désactivation automatique du formulaire** : Le formulaire est rendu `inert` si le reCAPTCHA n’est pas actif (cookie non accepté), empêchant l’interaction avec les champs et les boutons. ```ts ``` ### Injection du token reCAPTCHA : Au submit, si le reCAPTCHA est activé, le hook useRecaptcha récupère le token et l’injecte dans data["g-recaptcha-response"] avant d’appeler le callback onSubmit. ```tsx const handleSubmit = (e: FormEvent) => { ... data["g-recaptcha-response"] = token; ... }; ``` ### Bandeau d’information (RecaptchaNotice) : S’affiche uniquement si le reCAPTCHA n’est pas actif. Invite l’utilisateur à accepter les cookies pour activer le formulaire. Un bouton Accepter déclenche window.WebCookieNotice?.acceptCookie("recaptcha").