Add reCAPTCHA v3 to a contact form

​

Why use reCAPTCHA v3 with Crunchforms

• reCAPTCHA v3 provides a frictionless, score-based spam protection system from Google that does not interrupt users with challenges.
• Because Crunchforms already handles server-side validation of the reCAPTCHA token and score, you only need to execute reCAPTCHA on the front end and configure your keys and score threshold.
• Once configured, any submission via Crunchforms that fails token validation or scores below your configured threshold will be rejected automatically — minimal extra code required.

​

Prerequisites

• Read through Google’s reCAPTCHA v3 Intro and Guides to understand how it works and how scoring is used.
• You must have a Google account and access to the reCAPTCHA Admin Console.
• You must have a Crunchforms form set up (you already have a form-endpoint configured).
• Access to edit the HTML (or embed) of your form page to add the reCAPTCHA script and token handling.

​

Step 1: Create your reCAPTCHA v3 keys (in Google Admin Console)

1. Go to the reCAPTCHA Admin Console and sign in.
2. Click + Create (or + button) to register a new site.
3. Provide a descriptive Label for your site.
4. Select reCAPTCHA v3 as the type.
5. Add the domain(s) where your forms will be hosted.

6. Accept the terms of service and click Submit.
7. You will be shown a Site key (public) and a Secret key (private).

​

Step 2: Configure Crunchforms to use your reCAPTCHA v3 key

1. Navigate to your dashboard
2. Open the form’s settings by selecting Edit Form Settings from the menu next to the form, or from the same menu inside the form’s submission view.
3. Go to the Spam protection section.
4. Under Captcha, select reCAPTCHA v3.
5. Enter your Secret key from Step 1. If a key is already saved, it shows as •••••••• plus its last four characters — press Replace key to enter a new one.
6. Set the minimum Threshold score (0.0 – 1.0). Submissions scoring below this value are rejected; 0 accepts every score.
7. Set an Action — this is required. It must match the action your page passes to grecaptcha.execute(), e.g. submitForm.
8. Save your changes.

​

Step 3: Embed reCAPTCHA v3 on your form page

1. Load the reCAPTCHA v3 script (typically in <head>):
   <script src="https://www.google.com/recaptcha/api.js"></script>
   
2. Add a callback function to handle the token.
    <script>
        function onSubmit(token) {
            document.getElementById("demo-form").submit();
        }
    </script>
   
3. Add attributes to your html button.
    <button class="g-recaptcha" 
        data-sitekey="YOUR_SITE_KEY" 
        data-callback='onSubmit' 
        data-action='YOUR_ACTION'
    >
        Submit
    </button>
   

​

reCAPTCHA v3 Form Example

<html>
	<head>
		<script src="https://www.google.com/recaptcha/api.js"></script>
		<script>
			function onSubmit(token) {
				document.getElementById("demo-form").submit();
			}
		</script>
	</head>
	<body>
		<form 
			id="demo-form"
			action="https://crunchforms.com/form/{formID}" 
			method="post"
		> 
			<label for="email">Please Enter Your Email</label> 
			<input name="email" type="email" id="email" /> 
			<button 
				class="g-recaptcha" 
				data-sitekey="reCAPTCHA_site_key" 
				data-callback='onSubmit' 
				data-action='submit'
			>
				Submit
			</button>
		</form>
	</body>
</html>

​

Use with Single Page Applications, React, and Next.js

​

Next.JS reCAPTCHA v3 Example

import Script from "next/script";

export default function RecaptchaForm(props) {

    function onSubmit(event) {
        event.preventDefault()
        const data = new FormData(event.target)

        window.grecaptcha.ready(function() {
            window.grecaptcha.execute("YOUR_SITE_KEY", {action: 'YOUR_ACTION'}).then(function(token) {
                // Add your logic to submit to your backend server here.
                data.append('recaptchaToken', token);
                submit(data)
            });
        });
    };

    return (
        <>
            <Script src={"https://www.google.com/recaptcha/api.js?render="+"YOUR_SITE_KEY"} />

            <form onSubmit={onSubmit} > 
                <label for="email">Please Enter Your Email</label> 
                <input name="email" type="email" id="email" /> 
                <button type="submit">
                    Submit
                </button>
            </form>
        </>
    );
}

​

References

• Google reCAPTCHA — Intro
• Google reCAPTCHA — v3 Integration guides
• Google reCAPTCHA Admin Console

​

Next steps

​

Need Help?