reCAPTCHA Setup

Google reCAPTCHA is a security service that helps protect your website from spam and abuse by verifying that form submissions come from real users rather than automated bots. DigiBlocks integrates seamlessly with Google reCAPTCHA v3 to provide invisible protection for your Forms blocks without disrupting the user experience.

What is reCAPTCHA v3?

Unlike older versions of reCAPTCHA that required users to solve puzzles or click checkboxes, reCAPTCHA v3 runs in the background and analyzes user behavior to determine if they’re likely to be human or a bot. It assigns a score between 0.0 (very likely a bot) and 1.0 (very likely a human) to each interaction, allowing you to take appropriate action based on that score.

Why Use reCAPTCHA with DigiBlocks?

When you add Forms blocks to your website, they become potential targets for spam submissions and automated attacks. reCAPTCHA protection helps:

Reduce spam submissions by filtering out bot traffic
Protect your server resources from excessive automated requests
Improve data quality by ensuring genuine user interactions
Maintain email deliverability by preventing spam from clogging your inbox
Enhance security without adding friction for legitimate users

Getting Your reCAPTCHA Keys

Before configuring reCAPTCHA in DigiBlocks, you need to obtain API keys from Google. Here’s how to get them:

Step 1: Access Google reCAPTCHA Admin Console

Go to the Google reCAPTCHA Admin Console
Sign in with your Google account
If you don’t have a Google account, create one first

Step 2: Register a New Site

Click the “+” button to register a new site
Enter a Label for your site (this is just for your reference, like “My Website Forms”)
Select reCAPTCHA type: Choose “reCAPTCHA v3”

Step 3: Configure Domain Settings

In the Domains section, add your website domain
Enter your domain without the protocol (e.g., yourwebsite.com, not https://yourwebsite.com)
For development/testing, you can also add localhost
You can add multiple domains if needed (e.g., staging and production sites)

Step 4: Accept Terms and Submit

Check the box to accept the reCAPTCHA Terms of Service
Optionally, check the box to receive alerts about your site
Click “Submit” to create your reCAPTCHA site

Step 5: Copy Your Keys

After registration, you’ll see two important keys:

Site Key: This is public and will be embedded in your web pages
Secret Key: This is private and should be kept secure on your server

Copy both keys as you’ll need them for DigiBlocks configuration.

Configuring reCAPTCHA in DigiBlocks

Once you have your reCAPTCHA keys, follow these steps to configure them in DigiBlocks:

Accessing reCAPTCHA Settings

Navigate to your WordPress admin dashboard
Go to DigiBlocks > Settings
Scroll down to the “reCAPTCHA Settings” section

Entering Your Keys

Site Key: Paste your reCAPTCHA site key in the “Site Key” field
Secret Key: Paste your reCAPTCHA secret key in the “Secret Key” field
Click “Save Settings” to store your configuration

Verifying the Configuration

After saving your settings, DigiBlocks will automatically:

Load the reCAPTCHA JavaScript library on pages containing Forms blocks
Add the necessary reCAPTCHA tokens to form submissions
Verify tokens on the server side before processing forms

How reCAPTCHA Works with DigiBlocks Forms

Automatic Integration

When you add a Forms block to any page or post, DigiBlocks automatically:

Loads reCAPTCHA v3: The script is loaded only on pages that contain Forms blocks
Generates tokens: Each form submission includes a reCAPTCHA token
Server verification: The token is verified with Google’s servers before processing the form
Score evaluation: Forms with low scores (likely bots) are rejected

User Experience

With reCAPTCHA v3 properly configured:

Users see no difference: The protection is completely invisible
No interaction required: Users don’t need to solve puzzles or click checkboxes
Seamless submission: Forms work exactly as they did before, but with added protection
Instant feedback: Invalid submissions are blocked immediately

Score Thresholds

DigiBlocks uses intelligent score thresholds to determine valid submissions:

Scores above 0.5: Generally considered human and allowed
Scores below 0.5: Treated as potential bots and blocked
Very low scores (below 0.1): Almost certainly bots and immediately rejected

Testing Your reCAPTCHA Setup

Verification Steps

Create a test page with a Forms block
Submit the form from different devices/browsers
Check your email to ensure legitimate submissions are received
Monitor your Google reCAPTCHA dashboard for analytics

Google reCAPTCHA Analytics

Monitor your reCAPTCHA performance:

Go to the Google reCAPTCHA Admin Console
Select your site from the list
View analytics including:
- Request volume: Number of reCAPTCHA verifications
- Score distribution: How users are scored
- Top actions: Most protected pages/forms

Testing Different Scenarios

To ensure your setup works correctly:

Test 1: Normal User Behavior

Fill out the form naturally with reasonable delays
Submission should be successful

Test 2: Rapid Submissions

Try submitting the form multiple times quickly
Subsequent submissions might be blocked

Test 3: Different Browsers

Test across Chrome, Firefox, Safari, and Edge
All should work consistently

Common reCAPTCHA Issues and Solutions

Issue: reCAPTCHA Not Loading

Possible Causes:

JavaScript disabled in browser
Ad blockers interfering
Incorrect site key

Solutions:

Verify the site key is correct and public
Check browser console for JavaScript errors
Test with ad blockers disabled

Issue: Server-Side Verification Failing

Possible Causes:

Incorrect secret key
Server firewall blocking Google requests
SSL certificate issues

Solutions:

Double-check the secret key
Ensure your server can make outbound HTTPS requests to Google
Verify SSL certificates are valid

Security Best Practices

Protect Your Secret Key

Never expose your secret key in client-side code
Store it securely in your WordPress database
Don’t commit it to version control systems
Use different keys for development and production

Monitor Usage

Regularly check your reCAPTCHA analytics
Watch for unusual traffic patterns
Set up alerts for high volumes of failed verifications

Keep Keys Updated

Regenerate keys if they’re compromised
Update keys across all environments
Document key changes for your team

Backup Configuration

Include reCAPTCHA settings in site backups
Document your configuration for team members
Test restored configurations thoroughly

Troubleshooting Development Environments

Local Development

When working locally:

Add localhost to your reCAPTCHA domain list
Use the same keys for consistency
Test both local and production environments

Staging Sites

For staging environments:

Add your staging domain to reCAPTCHA
Use the same keys as production
Test before deploying to production

Multiple Domains

If you have multiple domains:

Add all domains to one reCAPTCHA site, or
Create separate reCAPTCHA sites for each domain
Keep track of which keys belong to which domains

Performance Considerations

Loading Impact

reCAPTCHA v3 is designed to be lightweight:

JavaScript size: Approximately 20KB compressed
Loading method: Asynchronous, doesn’t block page rendering
Conditional loading: DigiBlocks only loads it on pages with Forms blocks

Caching Compatibility

reCAPTCHA works with most caching plugins:

Page caching: No conflicts with static page caches
JavaScript optimization: Exclude reCAPTCHA scripts from minification
CDN compatibility: Works with most content delivery networks

Server Resources

reCAPTCHA verification:

Minimal server impact: Verification happens quickly
External dependency: Relies on Google’s servers being available
Fallback handling: DigiBlocks gracefully handles verification failures

By following this comprehensive guide, you’ll have reCAPTCHA properly configured to protect your DigiBlocks forms while maintaining a smooth user experience. The invisible protection ensures your forms remain secure without adding any friction for legitimate users.