Utiliser un reCAPTCHA personnalisé avec Formspree React

Si vous utilisez React et souhaitez protéger votre formulaire avec un reCAPTCHA, vous pouvez utiliser reCAPTCHA v3. Formspree React vous permet d’exécuter la fonction reCAPTCHA au moment de la soumission du formulaire.

Formspree React vous permet de passer un objet de données supplémentaire contenant une promesse à exécuter lors de la soumission du formulaire. Formspree exécutera la fonction en votre nom dans le gestionnaire de soumission.

Voici un exemple de formulaire utilisant Formspree React avec reCAPTCHA v3 :

import * as React from "react";
import { useForm, ValidationError } from "@formspree/react";
import { useGoogleReCaptcha } from "react-google-recaptcha-v3";

export default function ContactForm() {
  const { executeRecaptcha } = useGoogleReCaptcha();

  const [state, handleSubmit] = useForm("<hashid>", {
    data: { "g-recaptcha-response": executeRecaptcha }
  });

  if (state.succeeded) {
    return <p>Thanks for your submission!</p>;
  }
  return (
    <form onSubmit={handleSubmit}>
      // ...    
    </form>
  );
}