[Guide] Installing the new Invisible reCaptcha on your Website

[Guide] Installing the new Invisible reCaptcha on your Website


Google has recently introduced a new update to their reCaptcha service called the Invisible reCaptcha. It’s based on the same technology as the previous version (the “no captcha reCaptcha”), but simplifies the process to remove even the checkbox step. The captcha functionality is now tied completely to the submit button.

This article will cover the process of installing the Invisible reCaptcha on your site, detailing both the front and backend functionality. JavaScript will be used on the frontend and PHP on the backend.

We’ll split this article into three parts: Requesting the reCaptcha keys, Implementing the frontend, and Implementing the backend.

Requesting the reCaptcha keys

The first and easiest step to installing reCaptcha will be to request the public and private keys from the reCaptcha website. These are used as a unique site identifier, and also to prove that the real site owner is verifying their user’s identity.

Visit the reCaptcha website and click Get reCaptcha. Select Invisible reCAPTCHA from the radio box, enter your site’s domain(s) and hit register. You’ll now be given your personalized Site Key (public key) and Secret key (private key). Do not share your Secret Key with anybody, as otherwise they will be able to impersonate you.

Implementing the Frontend

To get started in the actual implementation, we’re first going to create a very simple HTML form named form.html.

Copy to Clipboard

Now let’s add some reCaptcha functionality. First you’ll need to link the reCaptcha API script in the tag.

Copy to Clipboard

This is used to do two things:

  • Prevents the submit button from immediately navigating away when clicked
  • Contacts Google with relevant user metrics to determine if they’re suspicious or not

In the previous version of reCaptcha, we would normally insert a new element above the submit button to be clicked. In the Invisible reCaptcha, we integrate directly with the submit button instead.

Copy to Clipboard

You’ll need to update the data-sitekey field with your own key from Google. Site keys are unique but are not secret, so don’t worry that this is public facing.

At this point the reCaptcha library will be loaded and will prevent the submit button from being clicked. This is where the data-callback field comes in. A callback function is a special type of function that is executed after a certain task has finished. In this case, it’s a JavaScript function named captchaSubmit that will be called after the button is clicked and Google’s measured the user metrics. As such, we’ll need to create a new JavaScript function with that name.

Copy to Clipboard

This code first accepts an argument (here called data) which carries the reCaptcha response data. You could add any client-side verification in at this point, but we’re simply going to submit the form.

Also note that getElementById("contact") refers to the ID used by the form, so it must match your form’s ID. Ours is simply named “contact”.

With these changes, our frontend is fully functional. Once submit is clicked the script will send data to Google and then complete the form. All that’s left is visual changes and cleanup.

You might have noticed the reCaptcha badge in the lower right corner of the screen. This exists to let users know that a form is protected by reCaptcha now that the verification checkbox has been removed. It’s possible to hide this badge however by configuring it to be inline, and then modifying it with CSS.

Copy to Clipboard

Please note that because Google collects user information to enable reCaptcha functionality, their terms of service require you to alert users to its use. If you hide the badge you’ll want to add an informational paragraph somewhere on the page instead.

Finally, let’s prepare for the next step. Add an action attribute to your form so we can send our results to the next page.

Copy to Clipboard

Now with the frontend code finished, let’s put it all together. Our completed form.html page now looks like this:

Copy to Clipboard

Implementing the Backend

The backend is where we validate the user’s input, and decide which actions to take as a result.

We’ll start by creating a new file called results.php. Note that the file extension should be .php, as it will require server-side code.

Copy to Clipboard

We’ve started with an empty template that simply thanks the user for submitting the form. Form data will be visible in the $_POST variable, which we’ll use shortly.

Next up is processing the reCaptcha response to verify the user is human. We’ll start by setting up our variables.

Copy to Clipboard
  • $secret is your Secret Key from reCaptcha. As this is being entered on the server-side, this will be completely hidden from the user.
  • $remoteip is the user’s IP address. This is an optional field, though improves accuracy.
  • $url is the URL we need to query to receive our response from reCaptcha.

Next up is collecting and processing the form data. $response will hold a reference to the user’s session, which is necessary for getting a proper response back.

Copy to Clipboard

Finally we have all the ingredients we need to query reCaptcha and verify the user’s humanity. For this purpose we’ll use a curl script.

Copy to Clipboard

$curlData has now captured the JSON response from reCaptcha. To make sense of this response, we’ll decode the JSON into an associative array.

Copy to Clipboard

Finally we can simply read the “success” property to receive our result.

Copy to Clipboard

Once again, let’s put it all together to see our (hopefully) working script.

Copy to Clipboard

Please note that this example doesn’t include error handling, such as if this page were accessed directly.

In this example we’re only printing “Success” or “Failure” based on the result of the captcha, but you can extend this to instead send an email, enable a user registration, or allow another action.

With all three pieces of the puzzle put together, we’re finished! You should now have a working implementation of Google’s Invisible reCaptcha on your form.

For more technical details or other questions, reCaptcha’s documentation can be found on Google’s Developer site.

By |2019-03-06T22:29:09+00:00March 21st, 2017|Technical|36 Comments

If you enjoyed this post, we'd appreciate a link in return!


  1. J.C. April 17, 2017 at 10:28 pm - Reply

    Doesn’t work for me.

    • admin April 20, 2017 at 10:37 am - Reply

      Hi J.C.,

      What problem are you having exactly? You may be able to look at your Javascript console to view any errors reported.

      Best of luck!

    • mory July 19, 2017 at 9:27 pm - Reply

      Thank you this worked for me.

  2. David Fallows April 24, 2017 at 4:10 pm - Reply

    Hi there,

    Thanks for the tutorial, it’s a really in-depth and concise explanation.

    Unfortunately however I end up with an eternal cycle of Captcha puzzles which pop up when my button is pressed. Any idea how to get around this one?

    Give it a try: http://davidfallows.net/


    • admin April 24, 2017 at 5:00 pm - Reply

      Hi David!

      Thanks for the kind words.

      From a quick look at your site, the page is throwing a Javascript error when you press Submit (as shown in the Console). The reason is that it’s trying to bind to the form ID, but it can’t find it. It looks like you have a duplicate #contact ID. Try running document.getElementById("contact") in your console to see.

      Giving it a unique ID and then updating the script tag in the header should resolve the problem.

      I’ll update the article to make this more explicit.


      • David Fallows April 25, 2017 at 12:42 pm - Reply

        Thanks very much! I’m very busy over the next couple of days, so I’ll try again on Thursday/Friday. 🙂

  3. Kevin Gibson May 2, 2017 at 9:21 pm - Reply

    Tried this, thanks for sharing! Seems to work ok-ish, only problem is I’m getting a 3×3 image grid before I can confirm the reCaptcha. Obviously not very invisible. Any reason for this?

    • admin May 2, 2017 at 9:41 pm - Reply

      Hi Kevin,

      This occurs when Google suspects that you may be a spambot, and so they apply a higher level of scrutiny to your submission. The same occurred with the previous Checkbox method.

      The reason for this is likely to be that you submitted the form many times while installing/testing it, and that behavior would look suspicious to Google. It should subside over time in that case. Another possibility is that you’re blocking information that Google uses to analyze your input (eg. Javascript, cookies), and so the only way they can verify if you’re a real user is to pop up the extra 3×3 image squares.

      Hopefully that helps. I’m glad the installation itself worked for you.

  4. Riyas May 3, 2017 at 1:05 pm - Reply



    it’s working perfectly!!!!

    I have two forms but the captcha only working with the first form not sure what’s happening with the second form, I curious to know how its work with multiple forms in a single page.


  5. Riyas May 4, 2017 at 4:54 pm - Reply

    Hi, is any chance to work in multiple forms in the same page?

  6. Belinda Chisholm May 6, 2017 at 7:45 am - Reply

    Works! Thankyou!

  7. asdas May 20, 2017 at 2:29 pm - Reply

    Super helpful. Thanks

  8. Lowell Klassen May 22, 2017 at 1:07 am - Reply

    Works! This is the best walkthrough I’ve found so far! Thank you!

  9. Lex June 16, 2017 at 3:13 pm - Reply

    Thanks, it’s working perfectly! 🙂

  10. Romain June 23, 2017 at 6:24 pm - Reply

    Thanks for your demo that’s very usefull !
    How can I implement 2 invisible captcha on a same page ?

  11. Phil July 4, 2017 at 1:11 am - Reply

    This worked great for me! The instructions on Google weren’t super clear to me, but this was perfect.

  12. Felix Heyl July 4, 2017 at 3:44 pm - Reply

    Indeed an excellent way of explaining the process of implementing invisible captcha. However, how on earth do I get the body section part:

    Please note this form is protected by reCaptcha.

    to work with my existing form :

    which directs straight to my server at one.com

    I am clueless in this regard.
    Many thanks

  13. LEDRU September 12, 2017 at 12:10 pm - Reply

    From Belgium (Europe) : Thanks very much

  14. Seyi October 19, 2017 at 11:33 am - Reply


    I only need to enable a button after google recaptcha is validated. I only have basic knowledge of coding.

    Pls can you help with this.

    Thanks in advance.

    • Isaac Zhao January 2, 2019 at 6:17 am - Reply

      You can do with an ajax call

  15. gail November 21, 2017 at 2:31 pm - Reply


    I tried adding the invisible Captcha code and it is not working as we still getting spam filling out our form.

    I check the analytics Graph and it said no captchas, no Pass and No fail.

    I have followed your instruction as best as I could but I am not sure what I did wrong.

    Can you help me?

  16. Dan January 2, 2018 at 10:24 pm - Reply

    Just in case this helps anyone else (I was struggling to figure out why my set-up wasn’t working for hours) – I was setting this up on my local WAMP environment and I kept getting the “Failure!” error message over and over again. Turns out the reason was that I was getting a Curl SSL error that was causing the data to come back from reCaptcha as null. To fix, I added this line to the Curl request: curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);. There are other methods to fix the issue, as detailed here: https://stackoverflow.com/questions/29822686/curl-error-60-ssl-certificate-unable-to-get-local-issuer-certificate/34883260, but that was the only one I could get to work for me.

    Anyway, hope that helps someone!

    • Simon February 14, 2018 at 8:53 am - Reply

      You are an angel! Thank you!

  17. Priya January 25, 2018 at 3:19 am - Reply

    function onload() {
    var element = document.getElementById(‘partyIdForm:searchButton’);
    element.onclick = validate;
    function onloadCallback(token) {
    function validate(event) {
    widgetId=grecaptcha.render(document.getElementById(‘partyIdForm:searchButton’), {
    ‘sitekey’ : ‘6LdOL0IUAAAAABE6T7WkBPLgtnIvZhxTU9lLgPI6’,

    And calling onload script each time form loads, with this invisible recaptch is working for single click of search button, which displays result in same form below search, so form is not reloaded.
    After results are displayed invsible recaptcha icon is not shown.
    I want to call recpatcha on every click of search

  18. mike January 29, 2018 at 12:35 pm - Reply

    Lovely stuff, thanks for the article

  19. Asha Shingadia February 2, 2018 at 10:05 am - Reply

    What if i want to test it locally.what should be used as domain.
    Right now i m using domain name as localhost but not working.
    so any one can able to give solution please provide me as soon as possible

  20. Chloe April 2, 2018 at 10:28 pm - Reply

    This worked for me. The issue I am facing is it works on desktop and iphones perfectly fine but on android devices when I click on submit button, nothing happens. I have to try several time to get the invisible captcha validation. When I refersh the page, it works and this is happening very intermittently. sometimes it works and sometimes it doesnt work on android. There is no specific pattern to debug. Any thoughts on this?

  21. Petr Stradal September 13, 2018 at 9:42 am - Reply

    Awesome, I had a problem with CURL, but i figured out. Thanks a lot

  22. Teo January 16, 2019 at 1:45 am - Reply

    Great!! Thank you. I was having a lot of trouble with the checkbox version, and this one (invisible) works perfectly. The only detail is that the required attribute stops working.

  23. Andrew Sabo February 23, 2019 at 3:26 am - Reply

    Excellent simple explanation! It worked great.

  24. poppi April 3, 2019 at 6:57 am - Reply

    Nice tut, but it really sucks that its not possible to c&p parts of your code tags

    • admin April 3, 2019 at 7:00 am - Reply

      You’re absolutely right. We previously used a different formatter for code tags but it conflicted with the theme and caused other problems. This version works, but I agree the copy/paste behaviour is frustrating. Sorry for the trouble!

  25. Angel GG April 19, 2019 at 12:14 pm - Reply

    funcionando !!!!! gracias

  26. Symen June 3, 2019 at 8:06 am - Reply

    Thanks for the help!

  27. Vibhu Kumar August 8, 2019 at 7:07 am - Reply

    One quer, How google will recognize that who is submitting the form. Human or Robot? Can you explain

    • admin August 8, 2019 at 4:07 pm - Reply

      Google uses a heuristical approach which analyzes information about your browser and current session to determine the likelihood of you being a bot. This is returned to the site owner who can then reject you on that premise.

Leave A Comment