reCAPTCHA - to appear after press submit

Question

I wanna use reCAPTCHA for my form. The user must fill the form and then press "Submit". After this, under the "Submit"-Button, reCAPTCHA should appear.

How I can do this?

Answer 1

If I were to want something like this, I would probably preload the reCAPTCHA into a jQuery dialog.

I think a user might get confused by a Captcha just appearing seemingly at random on the page when they press a button, but having a dialog come up to confirm some information is not unusual.

Answer 2

I just needed to do what you wanted, so initially keep reCaptcha hidden and show it on submit.

So I've hidden it with CSS:

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

And then showed it with jQuery when someone starts to fill in the form, so on input field focus:

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