Google reCAPTCHA V3

Easily integrate Google reCAPTCHA V3 with your form in only a few simple steps

Steps to integrate

1. Add your secret key

Add your Google reCAPTCHA secret key in your form settings when creating a new form or editing an existing forms settings.

2. Add form attributes

In order to use reCAPTCHA V3 with KwesForms, we require special has-recaptcha-v3 and recaptcha-site-key attributes on your form tag.

<form 
    ... 
    has-recaptcha-v3
    recaptcha-site-key="YOUR_SITE_KEY"
>
    ...
</form>

3. Add reCAPTCHA script

Add the Google reCAPTCHA script in your documents head as you normally would.

<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>

Example

Since the reCAPTCHA V3 is invisible, you should see a "Protected by reCAPTCHA" badge on the bottom right corner of this page indicating that this form is protected with Google reCAPTCHA V3.

Result
HTML Pretty
HTML W3C

<!DOCTYPE html>
<html>
<head>
    <title>This is a local form test.</title>
    <script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
</head>
<body>
    <form 
        class="kf-form" 
        action="YOUR_FORM_ACTION"
        has-recaptcha-v3
        recaptcha-site-key="YOUR_SITE_KEY"
    >
        <label for="your_name">Your Name</label>
        <input type="text" name="your_name">

        <button type="submit">Submit</button>
    </form>

    <script src="https://kwesforms.com/v2/kf-script.js" defer></script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>This is a local form test.</title>
    <script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
</head>
<body>
    <form 
        class="kf-form" 
        action="YOUR_FORM_ACTION"
        data-kw-has-recaptcha-v3
        data-kw-recaptcha-site-key="YOUR_SITE_KEY"
    >
        <label for="your_name">Your Name</label>
        <input type="text" name="your_name">

        <button type="submit">Submit</button>
    </form>

    <script src="https://kwesforms.com/v2/kf-script.js" defer></script>
</body>
</html>

Notice anything wrong in our docs? Let us know.