reCAPTCHA - появится после нажатия кнопки "Отправить"

Я хочу использовать reCAPTCHA для своей формы. Пользователь должен заполнить форму и нажать «Отправить». После этого под кнопкой «Отправить» должна появиться reCAPTCHA.

Как я могу это сделать?


recaptcha
person DavidParis    schedule 20.02.2011    source источник
comment
Смешивать? Что ты имеешь в виду? Нравится молочный коктейль reCAPTCHA? Или вы имели в виду появление?   -  person    schedule 21.02.2011
comment
проще поставить перед отправкой   -  person    schedule 21.02.2011
comment
Извините, я имел в виду появиться. :( Да, после того, как я нажму «Отправить», должна появиться reCAPTCHA.   -  person DavidParis    schedule 21.02.2011
comment
Вы хотите, чтобы капча была загружена, но скрыта, или чтобы она загружалась только при отправке? Для нашего любопытства, почему вы хотите сделать это именно так? (Не то чтобы мы пытались отговорить вас от этого — в любом случае это вполне разумный вопрос.)   -  person Rup    schedule 21.02.2011
comment
Я хочу сделать это, потому что считаю, что reCAPTCHA занимает много места. Что ж, хороший момент. Я думаю, было бы лучше, если бы reCAPTCHA загружалась при отправке. Не загружен, а скрыт. Что вы думаете, ребята? Что было бы лучше?   -  person DavidParis    schedule 21.02.2011

Ответы (3)


arrow_upward
1
arrow_downward

Если бы мне нужно было что-то подобное, я бы, вероятно, предварительно загрузил reCAPTCHA в диалоговое окно jQuery.

Я думаю, что пользователь может быть сбит с толку тем, что капча просто появляется на странице случайным образом, когда он нажимает кнопку, но появление диалогового окна для подтверждения некоторой информации не является чем-то необычным.

person Kevin Stricker    schedule 21.02.2011
comment
С точки зрения пользовательского интерфейса я согласен, но что тогда? Вы отправляете значение капчи обратно на сервер вместе с основной формой в виде публикации всей страницы? Если это так, и это не подтверждается, то что вы делаете тогда? Отобразить всю форму и автоматически открыть диалог с новой капчей? Что делать, если сервер выдает ошибку проверки исходных данных формы? Я не думаю, что эти случаи также работают. Если вы хотите проверить капчу на месте перед отправкой исходного диалога, вам нужно будет сначала отправить всю форму обратно на сервер с помощью jQuery, а затем обновить, если вы добились успеха, и т. д. - person Rup; 22.02.2011
comment
Я думаю, вам придется опубликовать все вместе (вам придется сделать это, иначе CAPTCHA можно будет обойти). Автоматически открывать диалоговое окно, только если есть ошибка в CAPTCHA, но не в остальной части формы. - person Kevin Stricker; 22.02.2011

arrow_upward
1
arrow_downward

Мне просто нужно было сделать то, что вы хотели, поэтому сначала держите reCaptcha скрытой и покажите ее при отправке.

Поэтому я скрыл это с помощью CSS:

div[id*='g-recaptcha'] {display:none}

А затем показал это с помощью jQuery, когда кто-то начинает заполнять форму, поэтому в фокусе поля ввода:

$(".YOUR_CLASS_WRAPPER input").focus(function() {
    $(".YOUR_CLASS_WRAPPER div[id*='g-recaptcha']").css("display","block");
});
person Mike    schedule 29.03.2016

arrow_upward
0
arrow_downward

2021, Контактная форма 7 пользователей

Если вы используете контактную форму 7, вам нужно немного измениться. Здесь я использую код @Mike с небольшими изменениями.

Скрытие reCAPTCHA

Класс-оболочка «Контактная форма 7» — это wpcf7-form-control-wrap recaptcha (два класса), и он находится в контейнере span, поэтому вам нужно использовать такой стиль. Здесь нет пробелов между двумя классами.

span.wpcf7-form-control-wrap.recaptcha {
    display:none;
}

Нажмите, чтобы показать

Добавьте id:submit к кнопке отправки, используя тег формы в окне контактной формы 7. И используйте идентификатор здесь.

[submit id:submit "Submit"]

$("#submit").focus(function() {
    $(".wpcf7-form-control-wrap.recaptcha").css("display","block");
});
person Dexter    schedule 25.05.2021