Can captcha be used with wappler?

Hi. my new Contact Us page, up for 1 day, got spammed. So I have had a look thru the tutorials and docs and cannot find a procedure to use captcha to test for robots. Is there one, or is this the best way to go? If not, what is best in Wappler?

There is a built in Google Recaptcha component in Wappler.

You certainly can …

This will add it to the page. You will also need to add it to your server connect api.

1 Like

Brilliant.

Is this the correct location?
image

I put the client key (rather than the server key) into both the captcha on the button and in the validate action in the api and unfortunately got the below

I then tried the server key in both spots, same result. There is no indication what he error might be.

The website is marama-cloud.com

I republished, cleared cache etc,

The Inspect does not show any obvious error that I can tell.

One thing I could not find was where I link the button to the api action step. Should I have created a variable of the button name, but where is teh server connection made to the caotcha. If I use the server connection on the form it replaces the mailer server connection.

Hi, I got thru the above issue. Now how do I stop the Send button from sending an email when the Captcha is not ticked? There is no validation options on the button or the form.

The server side seems set up correctly

image

Your API actions shouldn’t execute after the reCAPTCHA action if it wasn’t successful. The reCAPTCHA action should return an error code and stop.

THat is what I thought would happen, but the button still responds to a click and sends an email, even when the caotcha is not ticked

Can you post a screenshot of your entire API tree (the steps)?

You need to:

  1. Add recaptcha in your server action, as a first step there, before the send mail step:

Screenshot 2021-05-27 at 15.20.04
use the secret key provided by google.

  1. On the page, inside the server connect form add the recaptcha component and add the site key provided by google:

Screenshot 2021-05-27 at 15.22.06
and add your submit button in the form.

I haev swapped everything over to match your screen shot, removed the button of the form (because the send mail is under the captcha) but ticking the captcha does not submit,m so I will put the button back,

And the button still clicks and sends an email when the captcha is not ticked.

Have you added the recaptcha component in the form?

Yes

And are sure you are using the server action which contains the recaptcha for your server connect form?

I am not sure, I have and API that has the validate_capture, is this what yiou mean?

image

which leads to these steps

image

I do not have anything on Globals for recaptcha, shoudl I have?

On your page, you have a form. It needs to be a Server Connect form (there is a Make Server Connect Form button in form properties) In the properties panel have you selected this server action?

I did figure what you meant, I put the email in the capture folder instead of thr recaptcha into the mail folder, should be the same thing, and reset the server connection on the form to the captcha folder.
Now the button wont click at all. I will check everything now.
image

Just thought I would let you know, that Captcha is working well now, thank you.

Just because this came up again. Please include the hidden Google recaptcha solution in an early 4.x release, as this would greatly improve usability and interaction flow, and was requested already several times.

Thanks!