Ответ: Почему не работает?
• Нет вызова OnSuccess()
надо ее добавить в те штуки типа: Div class = hCaptcha и в возле настроек Пишем такой код data-callback="OnSuccess" и под ней надо написать Скрипт чтобы Реагировало на OnSuccess а потом под этим скриптом пишем JavaScript который будет реагировать на это Можете попросить ChatGPT В такой ситуации
• Используйте OnExpired
Эту команду вызывает когда капча не пройдена или токен закончился Например прошел reCAPTCHA и долго держишь в галочке тоже есть такое
• Как работает вызов OnSuccess?
Работает он так: Ответы обрабатываются в специальной секретной ссылке hCaptcha. Эта ссылка ловит ответ hCaptcha И потом передает эту функцию На Капчу и она видит пользователь прошел или нет
• Используйте Также Ещё команду OnExpired
Эта команда вызывается когда Ты отправил форму а капча не пройдена
Пример:
Также, Вы Можете Изменить код для перенаправления на другой сайт на стороне OnSuccess Если хотите
Пример кода:
<center>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Пример сайта</title>
<style>
body {
background-image: url("https://captcha-backgrounds.s3.yandex.net/static/default-background.jpg");
background-size: cover;
}
</style>
</head>
<body>
<!-- Ваш контент -->
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Обязательная hCaptcha</title>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.form-container {
background: white;
padding: 20px;
border-radius: 22px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.hidden {
display: none;
}
.success-message {
color: green;
text-align: center;
}
.error-message {
color: red;
text-align: center;
}
button {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Проверка hCaptcha</h2>
<div class="h-captcha" data-sitekey="8b9a4d2c-3b16-46a2-8d18-f9d6eccabb50" data-callback="onSuccess" data-expired-callback="onExpired"></div>
<div id="hcaptcha-success-message" class="hidden">
<p style="color: green;">Спасибо За прохождение Проверки!</p>
<p style="color: green;">Успех</p>
</div>
<div id="hcaptcha-error-message" class="hidden error-message">Пожалуйста, подтвердите, что вы не робот.</div>
<button id="submit-button">Отправить</button>
</div>
<script>
let isCaptchaSuccess = false;
function onSuccess(token) {
isCaptchaSuccess = true;
document.getElementById('hcaptcha-success-message').classList.remove('hidden');
document.getElementById('hcaptcha-error-message').classList.add('hidden');
}
function onExpired() {
isCaptchaSuccess = false;
document.getElementById('hcaptcha-success-message').classList.add('hidden');
}
document.getElementById('submit-button').addEventListener('click', function() {
if (isCaptchaSuccess) {
// Здесь вы можете обработать форму или выполнить другую логику
console.log('Капча пройдена успешно! Отправка формы...');
// Например, отправляя данные на сервер
// fetch('ваш_серверный_адрес', {
// method: 'POST',
// body: JSON.stringify({ /* ваши данные */ }),
// headers: {
// 'Content-Type': 'application/json',
// },
// });
} else {
// Отобразите сообщение об ошибке
document.getElementById('hcaptcha-error-message').classList.remove('hidden');
}
});
</script>
</body>
</html>
А где элемент зелёного текста можете также написать Что под ней появится Например Кнопка отправить при прохождении И наслаждайтесь кодом Но ответ длинный писал это 9 часов
