Form with reCAPTCHA or hCaptcha protection

Development of Form with reCAPTCHA/hCaptcha Protection

CAPTCHA protection prevents spam submissions, bot registrations and password brute force. Choice between Google reCAPTCHA and hCaptcha depends on privacy requirements and audience geography.

reCAPTCHA v3 (recommended)

v3 works invisibly: analyzes user behavior and returns score from 0.0 to 1.0 without showing challenges.

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

async function submitForm(data: FormData) {
  const token = await grecaptcha.execute('SITE_KEY', { action: 'submit_form' });

  await fetch('/api/contact', {
    method: 'POST',
    body: JSON.stringify({ ...data, recaptcha_token: token }),
  });
}

// Server-side verification
class RecaptchaService
{
    public function verify(string $token, string $expectedAction = 'submit_form'): bool
    {
        $resp = Http::post('https://www.google.com/recaptcha/api/siteverify', [
            'secret'   => config('services.recaptcha.secret'),
            'response' => $token,
            'remoteip' => request()->ip(),
        ]);

        $result = $resp->json();

        return $result['success'] === true
            && $result['action'] === $expectedAction
            && $result['score'] >= 0.5;  // threshold: 0.0 = bot, 1.0 = human
    }
}

hCaptcha (alternative)

hCaptcha compatible with reCAPTCHA v2 API, but privacy-focused. Preferred if audience in regions with Google restrictions:

<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
<div class="h-captcha" data-sitekey="SITE_KEY"></div>

$resp = Http::post('https://hcaptcha.com/siteverify', [
    'secret'   => config('services.hcaptcha.secret'),
    'response' => $request->h_captcha_response,
]);

$valid = $resp->json('success') === true;

Cloudflare Turnstile (least intrusive)

Most unobtrusive protection — just checkbox or fully invisible:

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="SITE_KEY"></div>

Verification goes to https://challenges.cloudflare.com/turnstile/v0/siteverify.

Implementation time: 1 business day.