With the release of our Ultimate PHP, HTML5 and AJAX Contact Form we’ve had numerous support comments relating solely to the integration of Google’s “noCAPTCHA reCAPTCHA”.
Because of this, we though it was high time to explain how to get it working well with your site.
For a working example of the new reCAPTCHA, and our new contact form visit the online demo.
Step 1 – Getting the Keys
As with any Google product, you’ll need a Google account first – if you don’t have one yet, simply create a google account.
Once you have an account, log into the reCAPTCHA admin page and set up your website.
Register your website by entering the website’s “name” into the “label” field and the exact domains you’ll be using reCAPTCHA on.
Note: If your domain uses “www.” at the start, make sure you have them in.
Click the “Register” button and expand the “Keys” accordion on the next page.
Step 2 – Adding reCAPTCHA to Your HTML
Now that you have your keys, you’ll need to update your HTML for the form, and the process.php file.
In the HTML you’ve copied/pasted into your site from the index.html file we provide you, theres a section for Google reCAPTCHA.
You’ll need to replace “YOUR_SITE_KEY” with the “Site Key” from Google (above).
In the example below (on lines 4 and 10), you can see we’ve added our “Site Key”:
[sourcecode language=”html”]<!– Google reCAPTCHA –>
<!– change YOUR_SITE_KEY with your google recaptcha key –>
<!– https://developers.google.com/recaptcha/docs/start –></pre>
<div class=”g-recaptcha” data-sitekey=”6LdYN_8SAAAAAPFItcsVA1YuI23vjmx8ah4jL6Dr”></div>
<noscript><div style=”width: 302px; height: 352px;margin-bottom:20px;margin-left:100px;”> <div style=”width: 302px; height: 352px; position: relative;”> <div style=”width: 302px; height: 352px; position: absolute;”> <!– change YOUR_SITE_KEY with your google recaptcha key –><br /> <iframe src=”https://www.google.com/recaptcha/api/fallback?k=6LdYN_8SAAAAAPFItcsVA1YuI23vjmx8ah4jL6Dr” frameborder=”0″ scrolling=”no” style=”width: 302px; height:352px; border-style: none;”><br /> </iframe> </div> <div style=”width: 250px; height: 80px; position: absolute; border-style: none; bottom: 21px; left: 25px; margin: 0px; padding: 0px; right: 25px;”> <textarea id=”g-recaptcha-response” name=”g-recaptcha-response” class=”g-recaptcha-response” style=”width: 250px; height: 80px; border: 1px solid #c1c1c1; margin: 0px; padding: 0px; resize: none;” value=””></textarea> </div> </div> </div></noscript>
<pre>
[/sourcecode]
Step 3 – Adding reCAPTCHA to process.php
Towards the top of the file, you’ll see a set of “options” you can tweak.
The line you’ll need to change is the first option in the list.
Below is an example with our “Secret Key” put in.
[sourcecode language=”php”]// Form options
$options[‘captcha_secret’] = ‘6LdYN_8SAAAAAKfJhGDV4_2nUixW0yBmR_GYw23q’; // Google reCAPTCHA secret key[/sourcecode]
Troubleshooting
We’ve not run into many problems getting this working once everything is set up, so the chances are, if you’re struggling, it’s not quite set up right.
The first step to take is to tripple check you have the correct URL in the reCAPTCHA admin for your website, and that you’ve used the correct keys in the correct places in your code.
If you’re still having issues, you should check the “network” tab in your browser’s inspector window (you’ll need to be a developer to understand this).
If you’re seeing a 504 bad gateway error, it could be that your server is being blocked, or that a firewall is prevent your server from talking to google’s servers.
Unfortunately, we can’t help with this as it’s likely to be an issue with your hosting provider.
If you spot any other issues, please let us know so we can update this post to help others.