Enable and Configure reCAPTCHA in WebConnect

1. Go to Advanced Settings

   • Open the WebConnect Source settings.
   • Scroll down to the Advanced Settings section.

2. Toggle on reCAPTCHA

   • Locate the “Enable Google reCAPTCHA” option.
   • Toggle the switch to On.

   

3. Configure reCAPTCHA Settings

   • A new section called reCAPTCHA Settings will appear.
   • Complete the following fields:
     • reCAPTCHA Secret Key: Enter the secret key provided by Google reCAPTCHA. You can generate this key at Google reCAPTCHA Admin Console.
     • reCAPTCHA v3 Score: Set the minimum score for reCAPTCHA validation (default is 0.7). Scores range from 0 to 1, where values closer to 1 indicate a high likelihood of a human user. Learn more about interpreting the reCAPTCHA v3 score

<aside> ❗

Important Note

The g-recaptcha-response field is mandatory for reCAPTCHA to work. If this field is empty, the lead will not be created.

</aside>

Setting Up a Test Form

Below is an example form showing how to embed the reCAPTCHA code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>reCAPTCHA v3 Test</title>
</head>
<body>

<h1>reCAPTCHA v3 Test Form</h1>

<form id="test-form" action="<https://localhost/api/webhook/33894875/c6df7ea8dbebf29d2f0c3b80a29109d95ca2a3fbc49f9a5c5fa8ec56c89291a6>" method="POST">
    <label for="name">Name:</label><br>
    <input type="text" id="name" value="John Doe" name="name" required><br><br>

    <label for="email">Email:</label><br>
    <input type="email" id="email" value="[email protected]" name="email" required><br><br>

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

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

<script>
    document.getElementById('test-form').addEventListener('submit', function(event) {
        event.preventDefault();
        
        grecaptcha.ready(function() {
            grecaptcha.execute('6LdD5pgqAAAAAHs7Bue0rMLB57GUMVGRLPRDVNHy', {action: 'submit'}).then(function(token) {
                // Add the token to the form as a hidden input
                let recaptchaInput = document.createElement('input');
                recaptchaInput.setAttribute('type', 'hidden');
                recaptchaInput.setAttribute('name', 'g-recaptcha-response');
                recaptchaInput.setAttribute('value', token);
                document.getElementById('test-form').appendChild(recaptchaInput);

                // Submit the form after the token is added
                document.getElementById('test-form').submit();
            });
        });
    });
</script>

</body>
</html>

How it Works

1. The user fills in their name and email.
2. When the form is submitted, the g-recaptcha-response token is generated via the grecaptcha.execute() function.
3. The token is attached to the form as a hidden input field (g-recaptcha-response).
4. The form is submitted to the webhook URL.

<aside> 💡 Useful Links

• Basic setup instructions </aside>