Introducing reCAPTCHA v3 for Pro Users

We're excited to announce that reCAPTCHA v3 is now available exclusively for Static Forms Pro users! This powerful invisible CAPTCHA solution provides superior spam protection without requiring any user interaction.

What is reCAPTCHA v3?

reCAPTCHA v3 is Google's latest CAPTCHA technology that analyzes user behavior in the background and assigns a score from 0.0 (likely a bot) to 1.0 (likely a human). Unlike v2, there are no checkboxes to click or images to identify - it works completely invisibly!

Key Benefits

Invisible Protection: No user interaction required - completely frictionless experience
Score-Based Detection: Uses advanced algorithms to detect bots based on behavior
Customizable Thresholds: Set your own minimum score for form submissions
Better Conversion: No frustrating CAPTCHA challenges means more completed forms
Pro Exclusive: Available only for Static Forms Pro subscribers

Comparing v2 and v3

Feature	reCAPTCHA v2	reCAPTCHA v3 (Pro)
User Interaction	✓ Required	✗ None
Visibility	Visible checkbox	Invisible
Scoring	Pass/Fail	0.0 - 1.0 score
Customization	Limited	Adjustable threshold
User Experience	Some friction	Completely seamless
Availability	All tiers	Pro only

Setting Up reCAPTCHA v3

Step 1: Get Your reCAPTCHA v3 Keys

Visit the Google reCAPTCHA Admin Console
Click the "+" icon to register a new site
Select reCAPTCHA v3 as the type
Add your domain(s)
Copy your Site Key and Secret Key

Step 2: Configure in Static Forms

Log into your Static Forms dashboard
Navigate to CAPTCHA Settings
Select the reCAPTCHA tab
Choose v3 Invisible (Pro users only)
Enter your Secret Key
Set your minimum score threshold (recommended: 0.5)
Save your settings

Step 3: Implement in Your Form

HTML Form Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contact Form with reCAPTCHA v3</title>
    <!-- Load reCAPTCHA v3 -->
    <script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
</head>
<body>
    <form id="contact-form" action="https://api.staticforms.dev/submit" method="POST">
        <input type="text" name="name" placeholder="Name" required>
        <input type="email" name="email" placeholder="Email" required>
        <textarea name="message" placeholder="Message" required></textarea>
        
        <!-- Hidden fields -->
        <input type="hidden" name="apiKey" value="YOUR_API_KEY">
        <input type="hidden" name="recaptchaToken" id="recaptchaToken">
        
        <button type="submit">Send</button>
    </form>

    <script>
        const RECAPTCHA_SITE_KEY = 'YOUR_SITE_KEY';
        
        document.getElementById('contact-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            // Get reCAPTCHA token
            const token = await grecaptcha.execute(RECAPTCHA_SITE_KEY, { 
                action: 'submit' 
            });
            
            // Add token to form
            document.getElementById('recaptchaToken').value = token;
            
            // Submit form
            const formData = new FormData(e.target);
            const response = await fetch(e.target.action, {
                method: 'POST',
                body: formData
            });
            
            if (response.ok) {
                alert('Form submitted successfully!');
                e.target.reset();
            }
        });
    </script>
</body>
</html>

Next.js Example

'use client';

import { useState, useEffect } from 'react';

declare global {
  interface Window {
    grecaptcha: {
      execute: (siteKey: string, options: { action: string }) => Promise<string>;
    };
  }
}

export default function ContactForm() {
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    // Load reCAPTCHA v3 script
    const script = document.createElement('script');
    script.src = `https://www.google.com/recaptcha/api.js?render=${process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}`;
    document.head.appendChild(script);
  }, []);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsLoading(true);

    try {
      // Get reCAPTCHA token
      const token = await window.grecaptcha.execute(
        process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!,
        { action: 'submit' }
      );

      const formData = new FormData(e.currentTarget);
      formData.append('apiKey', process.env.NEXT_PUBLIC_STATIC_FORMS_API_KEY!);
      formData.append('recaptchaToken', token);

      const response = await fetch('https://api.staticforms.dev/submit', {
        method: 'POST',
        body: formData,
      });

      if (response.ok) {
        alert('Form submitted successfully!');
        e.currentTarget.reset();
      } else {
        const error = await response.json();
        throw new Error(error.error || 'Submission failed');
      }
    } catch (error) {
      console.error('Error:', error);
      alert('Failed to submit form');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Name" required />
      <input type="email" name="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Sending...' : 'Send'}
      </button>
    </form>
  );
}

Understanding Score Thresholds

reCAPTCHA v3 returns a score between 0.0 and 1.0 for each request:

1.0: Very likely a legitimate human interaction
0.5: Medium risk (recommended default threshold)
0.0: Very likely a bot or malicious activity

Choosing Your Threshold

In your Static Forms dashboard, you can set the minimum acceptable score:

0.3 - 0.4: More lenient - fewer false positives, but may allow some spam
0.5: Balanced - recommended for most use cases
0.6 - 0.7: More strict - better spam protection, but may block some legitimate users
0.8+: Very strict - may cause false positives for legitimate users

Recommendation: Start with 0.5 and adjust based on your spam levels and user feedback.

Advanced Tips

Custom Actions

You can specify different actions for different forms:

const token = await grecaptcha.execute(SITE_KEY, { action: 'contact_form' });

This helps you analyze scores for different form types in the reCAPTCHA admin console.

Error Handling

Always handle potential errors gracefully:

try {
  const token = await grecaptcha.execute(SITE_KEY, { action: 'submit' });
  // Submit form...
} catch (error) {
  console.error('reCAPTCHA error:', error);
  // Optionally show error to user or retry
}

Testing in Development

reCAPTCHA v3 works in localhost for testing. Make sure to register localhost as a domain in your reCAPTCHA admin console.

Monitoring and Analytics

Google provides detailed analytics in the reCAPTCHA admin console:

View score distribution across your forms
Analyze suspicious requests
Monitor detection accuracy
Adjust thresholds based on real data

Troubleshooting

Form Rejections

If legitimate users are being blocked:

Check your score threshold - try lowering it
Review the reCAPTCHA console for score patterns
Ensure the reCAPTCHA script loads before form submission

Token Errors

Tokens expire after 2 minutes - generate a new token for each submission
Don't reuse tokens across multiple requests
Ensure your domain is registered in the reCAPTCHA console

Migration from v2 to v3

Already using reCAPTCHA v2? Here's how to upgrade:

Generate new v3 keys in the reCAPTCHA console
Update your Static Forms settings to v3
Replace v2 checkbox with v3 token generation code
Test thoroughly with various score thresholds
Monitor analytics for the first few days

Why Pro Only?

reCAPTCHA v3 requires sophisticated score-based analysis and additional infrastructure to process and validate scores effectively. By making this a Pro feature, we can:

Provide reliable, high-performance verification
Offer customizable score thresholds
Include detailed analytics and monitoring
Ensure the best possible user experience

Get Started Today

Ready to upgrade your form protection with invisible reCAPTCHA v3?

Have questions? Contact our support team - we're here to help!

Summary

reCAPTCHA v3 offers:

✓ Invisible, frictionless user experience
✓ Score-based bot detection
✓ Customizable security thresholds
✓ Better conversion rates
✓ Easy implementation

Upgrade to Pro today and give your forms the protection they deserve, without compromising user experience!