Dodawanie captcha na stronę formularza kontaktowego

Aby dodać CAPTCHA na stronę formularza kontaktowego, możesz skorzystać z Google reCAPTCHA, które jest jednym z najpopularniejszych rozwiązań. Google reCAPTCHA zabezpiecza formularz przed botami i spamem, wymagając od użytkownika potwierdzenia, że jest człowiekiem.

Oto szczegółowy przewodnik krok po kroku, jak dodać Google reCAPTCHA do formularza kontaktowego:

1. Rejestracja na Google reCAPTCHA

Aby korzystać z Google reCAPTCHA, musisz zarejestrować swoją stronę w usłudze Google.

Kroki:

Wejdź na stronę Google reCAPTCHA.
Zaloguj się na swoje konto Google.
Zarejestruj swoją stronę, wybierając typ reCAPTCHA (polecam reCAPTCHA v2 „I’m not a robot” lub reCAPTCHA v3).
- reCAPTCHA v2: Widoczna, użytkownik musi kliknąć pole „Nie jestem robotem”.
- reCAPTCHA v3: Niewidoczna, działa w tle, nie wymaga interakcji użytkownika.
Po rejestracji dostaniesz dwa klucze:
- Site Key: Klucz publiczny, który będzie osadzony w kodzie HTML.
- Secret Key: Klucz prywatny, który będzie używany do weryfikacji odpowiedzi z CAPTCHA na serwerze.

2. Dodanie reCAPTCHA do formularza HTML

Oto przykład formularza z Google reCAPTCHA v2:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formularz Kontaktowy</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>

    <form action="process_form.php" method="POST">
        <label for="name">Imię:</label><br>
        <input type="text" id="name" name="name" required><br><br>

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

        <label for="message">Wiadomość:</label><br>
        <textarea id="message" name="message" required></textarea><br><br>

        <!-- Google reCAPTCHA widget -->
        <div class="g-recaptcha" data-sitekey="TWOJ_SITE_KEY"></div><br>

        <input type="submit" value="Wyślij">
    </form>

</body>
</html>

Zastąp "TWOJ_SITE_KEY" własnym Site Key, który otrzymałeś podczas rejestracji.

3. Weryfikacja odpowiedzi reCAPTCHA na serwerze

Weryfikacja reCAPTCHA wymaga zapytania do serwera Google, co odbywa się w backendzie strony. Poniżej przykład dla PHP.

Skrypt w PHP:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Twój Secret Key z Google reCAPTCHA
    $secretKey = 'TWOJ_SECRET_KEY';

    // Pobranie danych z formularza i reCAPTCHA
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $recaptchaResponse = $_POST['g-recaptcha-response'];

    // Wysłanie żądania do Google w celu weryfikacji odpowiedzi CAPTCHA
    $verifyUrl = 'https://www.google.com/recaptcha/api/siteverify';
    $response = file_get_contents($verifyUrl . '?secret=' . $secretKey . '&response=' . $recaptchaResponse);
    $responseKeys = json_decode($response, true);

    // Sprawdzenie, czy reCAPTCHA była poprawna
    if (intval($responseKeys["success"]) !== 1) {
        echo 'Weryfikacja CAPTCHA nie powiodła się. Spróbuj ponownie.';
    } else {
        // Jeśli CAPTCHA poprawna, przetwarzamy formularz
        // Możesz tutaj zapisać dane do bazy danych lub wysłać e-mail
        echo 'Formularz został pomyślnie wysłany!';
    }
}
?>

Zamień "TWOJ_SECRET_KEY" na swój Secret Key z Google.
W przypadku powodzenia, odpowiedź CAPTCHA będzie zawierać pole success ustawione na true (1). Jeśli weryfikacja się nie powiedzie, można poinformować użytkownika o błędzie.

4. Testowanie

Przetestuj formularz, wysyłając go bez zaznaczenia reCAPTCHA oraz z poprawnym zaznaczeniem, aby upewnić się, że weryfikacja działa poprawnie. CAPTCHA nie przepuści formularza, jeśli nie będzie poprawnie wypełniona.

5. Uwagi końcowe:

Google reCAPTCHA v3 jest mniej inwazyjna, ponieważ działa w tle, ale wymaga skonfigurowania bardziej zaawansowanej logiki do interpretacji wyniku CAPTCHA. Wynik ten jest wartością od 0 do 1, gdzie im wyższy wynik, tym większe prawdopodobieństwo, że użytkownik nie jest botem.
Jeśli nie chcesz, aby CAPTCHA była zbyt inwazyjna, rozważ użycie v3, ale v2 jest prostsze do implementacji i daje lepsze bezpieczeństwo w podstawowych zastosowaniach.