How can I use Google NoCaptcha?

Details
Published: Tuesday, 11 August 2015 13:49

ChronoForms v5 supports Google NoCaptcha - also known as ReCaptcha v2. This FAQ tells how to set it up and gives some suggestions for Debugging if there are problems.

Setting up NoCaptcha

In the form Designer tab you need to drag in a Recaptcha element from the Advanced actions group. The same action is used for both ReCaptcha and NoCaptcha. If you are creating custom HTML then you need to include {ReCaptcha} and ChronoForms will replace that with the NoCaptcha code.

In the Setup tab drag a Load Google NoCaptcha action into the On Load event and make sure that it is before the HTML (Render form) action.

Then drag a Check Google NoCaptcha action into the On Submit event and move it up to be the first action in the event. Drag an Event Loop action into the pink On Fail event.

You will need to get NoCaptcha keys from Google to use with your form. They are specific to your site so the old universal ones that came with earlier versions of ChronoForms will no longer work. Keys are available from a link on this page (registration may be needed). The keys are long strings of characters, you will need both the Site Key and the Secret key.

The Site key goes into the box in the Load Google NoCaptcha action settings.

The Secret key goes into the box in the Check Google NoCaptcha action settings. 

Save your form and test. Normally that is all that is needed.

Debugging

If the NoCaptcha doesn't work it can fail in several ways.

If the form does not submit and there are no error messages then the problem is probably with the site SEF URLs and not the NoCaptcha - please check this FAQ.

The first thing is to check that you have the correct keys for your site and they are in the correct boxes - they look similar and it is simple to miss a character off the end or to put a key in the wrong action.

If this doesn't resolve it then you can add a Debugger to your form to see the output from the NoCaptcha check. To get this to work you need to temporarily remove the Event Loop action from the On Fail event. 

Google NoCaptcha has a few simple error message that might be displayed see this page in the Google docs.

If there is no error message then you can try temporarily setting site Error Reporting to Maximum in the site Global Configuration (note - a site setting, not a ChronoForms one). Then, when you submit the form you may see a message like this:

Warning: file_get_contents(): https:// wrapper is disabled in the server configuration by allow_url_fopen=0 in . . .

This particular message says that the PHP file_get_contents() method that ChronoForms is using is disabled on this server. You will need to contact you web-host to see if this can be changed on your site.

If this still does not help you can temporarily remove the Check Google NoCaptcha action and replace it with a Custom Code action with some Debug Code like this:

<?php
$secret_key = '6L . . . A'; // << add your Secret Key here
$google_url = "https://www.google.com/recaptcha/api/siteverify?secret={$secret_key}&response={$form->data('g-recaptcha-response')}";
echo'<div>$google_url: '.print_r($google_url, true).'</div>';
$response = file_get_contents($google_url);
$response = json_decode($response, true);
echo'<div>$response: '.print_r($response, true).'</div>';
?>

This will dump out the URL being sent to Google and the response received back from them. There are two items shown: $google_url and $response.

If $response is empty then you can try copying and pasting the url into your browser to see if that gives a response. If it does then you probably have the problem with file_get_contents() described above.

Using the Compact version

Google has a Compact version of NoCatptcha that may be better for use in modules and responsive forms. ChronoForms v5 doesn't directly support this but it is possible to use it by adding the code at the end of the Site Key box like this

6L. . .n3w" data-size="compact

or, to you can use more options, like this

6L. . .n3w" data-size="compact" data-style="audio" data-theme="dark

Please note exactly where the quotes " are in each case - there is one at the end of the key (but not at the beginning) and there is no quote at the very end of the string.