Как реализовать добавление капчи при клике на определенный объект на веб-странице?

Question

Эльмина

recaptcha

Как реализовать добавление капчи при клике на определенный объект на веб-странице?

Как можно добавить reCAPTCHA на форму, которая открывается после клика на кнопку, используя jQuery? Вот код, который вызывает форму после клика: 
```javascript
jQuery('.page-header__button').on('click', function (event) {
    event.preventDefault();
    $form = '&lt;form class="order__form" data-firstS="true" action=""&gt;&lt;div class="order__block"&gt;&lt;label class="order__block-label" for="order__block-input_name"&gt;Ваше имя2&lt;/label&gt;&lt;div class="order__block-image order__block-image_6"&gt;&lt;/div&gt;&lt;input id="order__block-input_name" class="input order__block-input order__block-input_tel" required name="input_name" type="text" placeholder="Обязательно"&gt;&lt;/div&gt;&lt;div class="order__block"&gt;&lt;label class="order__block-label" for="order__block-input_tel"&gt;Ваш телефон&lt;/label&gt;&lt;div class="order__block-image order__block-image_1"&gt;&lt;/div&gt;&lt;input id="order__block-input_tel" class="input order__block-input order__block-input_tel" required name="input_tel" type="text" placeholder="Обязательно"&gt;&lt;/div&gt;&lt;label class="as_form__agree"&gt;&lt;input class="as_form__checkbox-hidden" required type="hidden" name="consent1" value=""&gt;&lt;input class="as_form__checkbox" required type="checkbox" name="consent1"&gt;&lt;span class="as_form__checkbox-custom"&gt;&lt;/span&gt;&lt;span class="as_form__check"&gt;Согласен с &lt;a class="as_form__check-link" href="/politika-konfidentsialnosti/" target="_blank"&gt; политикой конфиденциальности&lt;/a&gt;&lt;/span&gt;&lt;/label&gt;&lt;button class="order__form-button button button_orange" onclick="ym(70537165,\'reachGoal\',\'ost_zayavka\')"&gt;Оставить заявку&lt;/button&gt;&lt;/form&gt;';
    itemDomContent($form);
});
```

23 апреля 2024 г. 17:50

Ответы на вопрос 1

Похожие вопросы

Answer 1

Чтобы добавить reCAPTCHA на форму, которая открывается после клика на кнопку, вам сначала необходимо добавить скрипт reCAPTCHA на вашу страницу. Вы можете использовать следующий код:

```html
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
```

Затем вы можете добавить reCAPTCHA в вашу форму, изменив ваш код следующим образом:

```javascript
jQuery('.page-header__button').on('click', function (event) {
    event.preventDefault();
    $form = '&lt;form class="order__form" data-firstS="true" action=""&gt;&lt;div class="order__block"&gt;&lt;label class="order__block-label" for="order__block-input_name"&gt;Ваше имя2&lt;/label&gt;&lt;div class="order__block-image order__block-image_6"&gt;&lt;/div&gt;&lt;input id="order__block-input_name" class="input order__block-input order__block-input_tel" required name="input_name" type="text" placeholder="Обязательно"&gt;&lt;/div&gt;&lt;div class="order__block"&gt;&lt;label class="order__block-label" for="order__block-input_tel"&gt;Ваш телефон&lt;/label&gt;&lt;div class="order__block-image order__block-image_1"&gt;&lt;/div&gt;&lt;input id="order__block-input_tel" class="input order__block-input order__block-input_tel" required name="input_tel" type="text" placeholder="Обязательно"&gt;&lt;/div&gt;&lt;label class="as_form__agree"&gt;&lt;input class="as_form__checkbox-hidden" required type="hidden" name="consent1" value=""&gt;&lt;input class="as_form__checkbox" required type="checkbox" name="consent1"&gt;&lt;span class="as_form__checkbox-custom"&gt;&lt;/span&gt;&lt;span class="as_form__check"&gt;Согласен с &lt;a class="as_form__check-link" href="/politika-konfidentsialnosti/" target="_blank"&gt; политикой конфиденциальности&lt;/a&gt;&lt;/span&gt;&lt;/label&gt;&lt;div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"&gt;&lt;/div&gt;&lt;button class="order__form-button button button_orange" onclick="ym(70537165,\'reachGoal\',\'ost_zayavka\')"&gt;Оставить заявку&lt;/button&gt;&lt;/form&gt;';
    itemDomContent($form);

    // После добавления формы, активируем reCAPTCHA
    grecaptcha.render(document.querySelector('.g-recaptcha'), {
        'sitekey': 'YOUR_SITE_KEY'
    });
});
```

Замените `'YOUR_SITE_KEY'` на ваш собственный ключ сайта reCAPTCHA. Теперь после клика на кнопку и открытия формы, reCAPTCHA будет отображаться на форме для дополнительной защиты.