Skip to content

Google reCAPTCHA Setup

Google reCAPTCHA provides human verification to protect your forms from automated spam and abuse. Basin supports both reCAPTCHA v2 and v3, each offering different user experiences and security approaches.

The easiest way to implement reCAPTCHA is using BasinJS, our JavaScript helper library. BasinJS handles all the setup automatically for any of our supported CAPTCHA solutions.

To use BasinJS, follow the steps outlined in our BasinJS Documentation.

Manual Setup Options (Advanced)

If you prefer manual implementation, choose between reCAPTCHA v2 or v3 based on your needs:

  • reCAPTCHA v2: Visible checkbox or interactive challenges
  • reCAPTCHA v3: Invisible, background analysis with risk scoring

Google reCAPTCHA v2 Setup

reCAPTCHA v2 provides a visible verification method with optional invisible mode.

Important: Use Basin's Site Key

You must use Basin's reCAPTCHA v2 site key. Other site keys will NOT work.

Basin reCAPTCHA v2 Site Key: 

6Lew3SMUAAAAAJ82QoS7gqOTkRI_dhYrFy1f7Sqy

Step 1: Add reCAPTCHA Script

Add this script tag to your page's <head> section, outside of your form code:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Step 2: Add reCAPTCHA Widget to Form

Insert the reCAPTCHA div within your form using Basin's site key:

<form accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <textarea name="message" placeholder="Your Message" required></textarea>

    <!-- reCAPTCHA widget -->
    <div class="g-recaptcha" data-sitekey="6Lew3SMUAAAAAJ82QoS7gqOTkRI_dhYrFy1f7Sqy"></div>

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

Step 3: Enable reCAPTCHA in Basin Dashboard

  1. Go to your form's settings: Form → Settings → Spam
  2. Enable "Require Valid reCAPTCHA response"
  3. Save your settings

Optional: Invisible reCAPTCHA v2

For a seamless user experience without visible verification widgets:

<script>
function onSubmit(token) {
    var form = document.getElementById("invisible-recaptcha-form");

    // Check if form is valid
    if (form.checkValidity()) {
        form.submit();
    } else {
        // If the form is not valid, trigger the browser's default validation UI
        form.reportValidity();
    }
}
</script>

<form id="invisible-recaptcha-form" accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <textarea name="message" placeholder="Your Message" required></textarea>

    <button class="g-recaptcha" 
            data-sitekey="6Lew3SMUAAAAAJ82QoS7gqOTkRI_dhYrFy1f7Sqy" 
            data-callback='onSubmit' 
            data-badge="inline">
        Submit
    </button>
</form>

Optional: Hide Attribution Badge

If using invisible reCAPTCHA, you can hide Google's attribution badge:

<style>
    .grecaptcha-badge {
        display: none;
    }
</style>

Google reCAPTCHA v3 Setup

reCAPTCHA v3 provides a superior user experience by running invisibly in the background and scoring user interactions without requiring explicit verification.

Important: Use Basin's Site Key

You must use Basin's reCAPTCHA v3 site key. Other site keys will NOT work.

Basin reCAPTCHA v3 Site Key: 

6Les66kUAAAAANyLrgkl7iuN4JUpNlB5upaMovI4

Step 1: Add reCAPTCHA v3 Script

Include the reCAPTCHA v3 API script in your HTML head section:

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

Step 2: Add Hidden Inputs to Form

Add these hidden inputs to your form to capture the reCAPTCHA response:

<form id="my-form" accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <textarea name="message" placeholder="Your Message" required></textarea>

    <!-- Required hidden inputs for reCAPTCHA v3 -->
    <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
    <input type="hidden" name="g-recaptcha-version" value="v3">

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

Step 3: Add Form Submission Script

Add this script before the closing </body> tag:

<script>
var myForm = document.getElementById('my-form')
myForm.addEventListener('submit', function(event) {
    event.preventDefault();

    grecaptcha.ready(function() {
        grecaptcha.execute('6Les66kUAAAAANyLrgkl7iuN4JUpNlB5upaMovI4', {action: 'submit'}).then(function(token) {
            document.getElementById('g-recaptcha-response').value = token;
            myForm.submit();
        });
    });
});
</script>

Step 4: Enable reCAPTCHA in Basin Dashboard

  1. Go to your form's settings: Form → Settings → Spam
  2. Enable "Require Valid reCAPTCHA response"
  3. Save your settings

Multiple Forms Support

For multiple forms on the same page with reCAPTCHA v3, ensure each form has: - Unique form ID - Unique hidden input IDs - Separate script for each form

Best Practices

  1. Choose the Right Version:
  2. Use v3 for seamless user experience

  3. Use v2 when you need explicit user verification

  4. Test Thoroughly: Always test your implementation before going live

  5. Monitor Performance: Check your Basin dashboard for blocked submissions

  6. User Experience: Consider the impact on legitimate users when choosing verification methods

Troubleshooting

  • Forms not submitting: Verify you're using Basin's site keys exactly as provided
  • reCAPTCHA not loading: Check that scripts are placed outside form tags
  • Multiple reCAPTCHA conflicts: Ensure only one version is implemented per form

For additional support, contact Basin support.