ldc-ovoteam/docs/recaptcha/RECAPTCHAFORM.md

Fonctionnement du composant RecaptchaForm

Le composant RecaptchaForm est un wrapper autour d’un <form> 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<HTMLFormElement>) => 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 <form>.

---

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.

<form inert={!enabled} ... >

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.

const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
  ...
  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").