Чтобы сделать hCaptcha обязательной для заполнения в форме, вам нужно интегрировать её с вашим HTML-кодом и добавить обработку событий для команд `OnSuccess` и `OnExpired`. Вот пример полного кода с настройкой формы и обработкой капчи:
```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;
background-image: url("https://captcha-backgrounds.s3.yandex.net/static/default-background.jpg");
background-size: cover;
}
.form-container {
background: white;
padding: 20px;
border-radius: 22px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.success-message {
color: green;
text-align: center;
}
.error-message {
color: red;
text-align: center;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Заполните форму</h2>
<form id="myForm" onsubmit="return validateForm(event)">
<input type="text" name="username" placeholder="Имя пользователя" required>
<input type="text" name="email" placeholder="Email" required>
<!-- hCaptcha widget -->
<div class="h-captcha" data-sitekey="ВАШ_КЛЮЧ_САЙТА" data-callback="onSuccess" data-expired-callback="onExpired"></div>
<button type="submit">Отправить</button>
</form>
<div class="success-message hidden" id="successMessage">Форма успешно отправлена!</div>
<div class="error-message hidden" id="errorMessage">Пожалуйста, пройдите капчу!</div>
</div>
<script>
function onSuccess(token) {
document.getElementById('successMessage').classList.remove('hidden');
document.getElementById('errorMessage').classList.add('hidden');
// Здесь вы можете выполнить дополнительные действия после успешного прохождения капчи.
}
function onExpired() {
document.getElementById('errorMessage').classList.remove('hidden');
document.getElementById('successMessage').classList.add('hidden');
// Здесь можно обработать случай, когда капча истекла.
}
function validateForm(event) {
event.preventDefault(); // Предотвращаем стандартное поведение отправки формы
// Проверка капчи перед отправкой формы
const token = hcaptcha.getResponse();
if (token) {
// Если капча пройдена, отправить форму (например, через AJAX или просто показать сообщение)
document.getElementById('myForm').submit(); // Замените на ваши действия отправки
return false; // Отменяем стандартное поведение
} else {
document.getElementById('errorMessage').classList.remove('hidden');
}
}
</script>
</body>
</html>
```
### Объяснение кода:
1. **Интеграция hCaptcha**: Используйте тег `<script>` для подключения hCaptcha API. Укажите свой ключ сайта в атрибуте `data-sitekey`.
2. **Форма**: Внутри формы создаются два текстовых поля (для имени пользователя и электронной почты), а также виджет hCaptcha.
3. **Обработчики событий**:
- `onSuccess`: вызывается, когда пользователь успешно проходит капчу. Здесь вы можете обработать результаты проверки и, при необходимости, выполнить дополнительные действия, например, отправить данные на сервер.
- `onExpired`: вызывается, если капча истекает, и нужно сообщить об этом пользователю.
4. **Валидация формы**: Перед отправкой формы проверяется, прошёл ли пользователь капчу. Если да, данные формы могут быть отправлены. Если нет, отображается сообщение об ошибке.
Не забудьте заменить `ВАШ_КЛЮЧ_САЙТА` на ваш фактический ключ hCaptcha.