CODEWITHSUNDEEP
recaptcha
DavidParis
DavidParis

Reputation: 31

reCAPTCHA - to appear after press submit

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?

Upvotes: 3

Views: 4131

Answers (3)

Dexter
Dexter

Reputation: 9344

2021, Contact form 7 Users

If you are using contact form 7 then you need to change a little bit. I am using the @Mike code here with little changes.

Hiding the reCAPTCHA

The 'Contact form 7' wrapper class is wpcf7-form-control-wrap recaptcha (two classes) and it is on a span container, so you need to use the style like this. No spaces between two classes here.

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

Click to show

Add id:submit to your submit button using the form-tag in the Contact Form 7 window. And use the id here.

[submit id:submit "Submit"]

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

Upvotes: 0

Mike
Mike

Reputation: 1266

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");
});

Upvotes: 1

Kevin Stricker
Kevin Stricker

Reputation: 17388

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.

Upvotes: 1

Related Questions