Jump to content

How to add Google reCAPTCHA v2

Recommended Posts

Hi there,

If you need to prevent some actions in your application made not by real people, this post is for you.
I am going to explain how easuly add Google reCAPTCHA v2 to any DataPage.
All you need is to have a Google account.

First, you need to create a key http://www.google.com/recaptcha/admin

This is very simple, you just need to type any label yuo wish, choose reCAPTCHA v2 and preferable validation method. I am going to use "I'm not a robot".
It is important to add domain of all the websites where you are going to use the DataPage. In case you are going to use only URL deployment option, the domain of your account, like 'AccountName.caspio.com' will be enough. Where 'AccountName' is a name of your Caspio account that you can find following  'Help->About Caspio'.

After creating a key you will see your site key that you will need to use later.

Second step is to add 2 snippets of code:

1) That part should be added to the Head tag on your own website or to the Header of the Configure Fields screen when you edit your DataPage:

<script type="text/javascript">
document.addEventListener("BeforeFormSubmit", function (event) {
if(grecaptcha.getResponse().length == 0){
   alert('Please pass reCaptcha to verify you are not a robot')
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Before pasting do not forget to either uncheck the checkbox 'Enable HTML editor' in the Advanced tab or enable 'Source'.

2) Then you need to add HTML block where you wish reCaptcha to apper on your DataPage and add the next code:

<div><div class="g-recaptcha" data-sitekey="YourSiteKey"></div></div>

 Where 'YourSiteKey' should be replaced with your site key.


The last step is to relax and stay assured that no robots will be able to mess up your data.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...