Web3Forms
  • Introduction
  • Getting Started
    • Installation
    • Customizations
      • Email Subject line
      • Success / Thank You Page
      • Custom Redirection
      • Captcha & SPAM
        • hCaptcha
        • reCaptcha & Turnstile
        • Honeypot
        • Report Spam
      • Custom Reply-To
      • From Name
    • Pro Features
      • reCaptcha Integration
      • Cloudflare Turnstile Captcha
      • Add CC Email
      • Autoresponder (Auto-Reply)
      • File Attachments
      • Advanced File Uploader
      • Webhooks
      • Restrict to Domain
      • Intro Text
    • Examples
      • Basic HTML Contact Form
      • Advanced - All Options
      • Ajax Contact Form using Javascript
      • Multi Column Contact Form
      • Javascript Form Validation
      • Contact Form with Dark Mode
      • Raw Contact Form
      • Google reCaptcha v3
      • File Upload Form
      • With Multiple Checkbox
    • Integrations
      • Zapier
      • Integromat
      • Examples
        • Google Sheets
        • Airtable
        • Telegram Notifications
    • Options Reference
    • API Reference
    • Troubleshooting
    • FAQ
  • How-to Guides
    • HTML & JavaScript
    • JS Frameworks
      • React JS
        • Web3Forms React Plugin
        • React Hook Form
        • Simple React Contact Form
        • React File Upload Form
        • React Google ReCaptcha v3
        • React Hook Form File Upload
      • Vue JS
      • Svelte
      • Angular JS
      • Alpine.js
    • Site Builders
      • Webflow
      • Framer
      • Carrd.co
      • Squarespace
      • Wix
      • Dorik
    • Static Site Generators
      • Next.js
      • Astro
      • Nuxt.js
      • Hugo
      • Jekyll
      • Gatsby
      • Gridsome
      • Eleventy
    • Hosting Providers
      • Vercel
      • Netlify
      • Digital Ocean
      • AWS
      • Github
      • Cloudflare
    • JAM Stack
    • Landing Page Builders
      • Unbounce
      • Instapage
      • Pagewiz
      • Groovefunnels
    • WordPress
      • Elementor
      • Oxygen Builder
Powered by GitBook
On this page

Was this helpful?

Edit on Git
  1. How-to Guides
  2. JS Frameworks
  3. React JS

React Google ReCaptcha v3

Next.js Example

PreviousReact File Upload FormNextReact Hook Form File Upload

Last updated 2 years ago

Was this helpful?

In this example, you can see a working google reCaptcha v3 (Invisible captcha) with React Hook Form.

Note: File Upload is only available for PRO users.

Live Demo

Here's the code:

import React from "react";
import { useForm } from "react-hook-form";
import Script from "next/script";

function App() {
  const { register, handleSubmit, setValue } = useForm();
  const [result, setResult] = React.useState("");
  const [captchatoken, setCaptchaToken] = React.useState("");

  React.useEffect(() => {
    setValue("recaptcha_response", captchatoken);
  });

  const onSubmit = async (data) => {
    console.log(data);

    setResult("Sending....");
    const formData = new FormData();

    formData.append("access_key", "YOUR_ACCESS_KEY_HERE");

    for (const key in data) {
      if (key === "file") {
        formData.append(key, data[key][0]);
      } else {
        formData.append(key, data[key]);
      }
    }

    const res = await fetch("https://api.web3forms.com/submit", {
      method: "POST",
      body: formData
    }).then((res) => res.json());

    if (res.success) {
      console.log("Success", res);
      setResult(res.message);
    } else {
      console.log("Error", res);
      setResult(res.message);
    }
  };

  return (
    <div className="App">
      <h1>React Hook Form File Upload</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input type="text" placeholder="Name" {...register("name")} />
        <br />
        <br />
        <input type="email" placeholder="Email" {...register("email")} />
        <br />
        <br />
        <input type="file" {...register("file")} />
        <br />
        <input
          type="hidden"
          {...register("recaptcha_response")}
          id="recaptchaResponse"
        />
        <br />
        <input type="submit" />
      </form>
      <br />
      <span>{result}</span>

      <Script
        id="recaptcha-load"
        strategy="lazyOnload"
        src={`https://www.google.com/recaptcha/api.js?render=RECAPTCHA_SITE_KEY`}
        onLoad={() => {
          grecaptcha.ready(function () {
            grecaptcha
              .execute("RECAPTCHA_SITE_KEY", {
                action: "contact"
              })
              .then(function (token) {
                //console.log(token);
                setCaptchaToken(token);
              });
          });
        }}
      />
    </div>
  );
}

export default App;
Invisible Google reCaptcha.