Ein benutzerdefiniertes reCAPTCHA mit Formspree React verwenden

Wenn du React verwendest und dein Formular mit einem reCAPTCHA schützen möchtest, kannst du reCAPTCHA v3 nutzen. Du kannst Formspree React verwenden, um die reCAPTCHA-Funktion auszuführen, wenn das Formular übermittelt wird.

Mit Formspree React kannst du ein zusätzliches Datenobjekt übergeben, das ein Promise enthält, das bei der Übermittlung des Formulars ausgeführt wird. Formspree führt die Funktion in deinem Namen im Submit-Handler aus.

Ein Beispielformular, das Formspree React mit reCAPTCHA v3 verwendet, findest du unten:

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