reCAPTCHA - 在提交后出现

Question

我想将reCAPTCHA用于我的表单。用户必须填写表格，然后按“提交”。在此之后，在“提交”-Button下，应该出现reCAPTCHA。

我怎么能这样做？

Answer 1

如果我想要这样的话，我可能会将reCAPTCHA预加载到jQuery dialog。

我认为用户可能会因为按下按钮时看起来像是随机出现的Captcha而感到困惑，但是有一个对话框来确认某些信息并不罕见。

Answer 2

我只需要做你想做的事情，所以最初隐藏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");
});

Answer 3

2021，联系表 7 用户

如果您使用的是联系表格 7，那么您需要稍作更改。我在这里使用了@Mike 代码，几乎没有什么变化。

隐藏 reCAPTCHA

'Contact form 7' 包装类是 wpcf7-form-control-wrap recaptcha（两个类）并且它位于 span 容器上，因此您需要使用这样的样式。这里两个类之间没有空格。

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

点击显示

使用 Contact Form 7 窗口中的 form-tag 将 id:submit 添加到您的提交按钮。 并在此处使用 id。

[submit id:submit "Submit"]

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