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 natrue
(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.