Using a custom reCAPTCHA with Formspree React

If you are using React and want to protect your form with a reCAPTCHA, you can use reCAPTCHA v3. You can use Formspree React to execute the reCAPTCHA function when the form is submitted.

Formspree React allows you to pass in an extra data object that contains a promise to be executed when the form is submitted. Formspree will execute the function on your behalf in the submit handler.

A sample form that uses Formspree React with reCAPTCHA v3 is below:

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>
  );
}