Add reCaptcha to Contact Form 7 in WordPress
Google has an improved, user-friendly Captcha system.
Contact Form 7 is the most popular contact form plugin for WordPress.
By combining the two, you can easily create WordPress contact forms with antispam protection.
In this tutorial, I’m going show you how to integrate reCaptcha to Contact Form 7 in your WordPress site.
Step #1. Install the Contact Form 7 plugin
- Login to your WordPress site.
- Go to Plugins > Add new and search for “Contact Form 7”.
- Click “Install Now” and activate the plugin.
Step #2. Get the reCaptcha public and secret keys
You need to generate keys for your domain:
- Go to the Google reCaptcha site.
- Click the “Get reCAPTCHA” button.
- Enter your site details such as label, domain and email owner:
Step #3. Integrate reCaptcha with Contact Form 7
Inside your WordPress dashboard:
- Go to Contact > Integration
- Type Site key and Secret key. Use the ones you generated in Step 2.
- Save when you’re done.
Step #4. Edit the default contact form
By default, a form with basic fields is created during the installation process in step 1.
- Go to Contact > Contact forms > Your form
- Paste this shortcode to render the reCaptcha field just before the submit button:
[recaptcha]
- Click the “Save” button.
Step #5. Embed the contact form in a page
- Go to Contact > Contact forms.
- Copy the shortcode of the form.
- Go to Pages > Add new.
- Paste the shortcode.
- Publish the page.
Step #6. View the end result
- Preview the contact page to see how it looks:
Great tutorial but when I add reCaptcha tag to my form, save it and view it on my homepage, the reCaptcha box is not visible?
I am using the latest version of Wordpres 4.4.1 and latest version of Contact Form 7 – 4.3.1
FYI: Crossposted in WordPress forum: [url=https://wordpress.org/support/topic/contact-form-7-and-recaptcha-1?replies=5#post-7890740]https://wordpress.org/suppo…[/url]
I am having this same issue. It’s on the lower right hand side of the site, but it’s not the “I’m not a robot” button. Did anyone figure out to fix this?
hi there you need the
Contact Form 7 reCAPTCHA extension to get this working also.
Thanks for note, Shane! It’s appreciated.
Thanks
You’re very welcome, Nicolas! 🙂
Hi is it possible to have the reCaptcha box and the send / submit button on the same line instead of the send button being below it?
Hi Michael,
Good question!
You’d have to use some custom CSS to float the button right. If you need more specific help, please consider signing up for our training: [url=https://www.ostraining.com/pricing/]https://www.ostraining.com/…[/url]
Thanks for the tutorial, it really helps.
You’re very welcome, Rafique! Glad it helped!
Thanks for the simple way
We’ve released the Magic Tooltips for Contact Form 7 plugin.
You can add tooltips to your Contact Form 7 Forms easily and quickly.
Our Contact Form 7 tooltips plugin comes with a Tooltip Style Generator to make styling your tooltips easy.
You can check it out on WordPress here:
[url=https://wordpress.org/plugins/magic-tooltips-for-contact-form-7/]https://wordpress.org/plugi…[/url]
or here:
[url=http://contactform7.magictooltips.com/]http://contactform7.magicto…[/url]
You can see the plugin in action here: [url=http://contactform7.magictooltips.com/contact]http://contactform7.magicto…[/url]
Thanks you very much 🙂
thanks so much for this Valentin. After about an hour of frustration with setting up ReCaptcha, I found your tutorial and it worked perfectly.
That’s great to hear, thanks ivorybow
Hi Valentín, nice video. Helped a lot. But now I have a problem not mentioned in your video, but I am looking for someone who can help me and maybe you can.
I have a website with 2 languages, Dutch and Enlish.
Main is Dutch, so the warning in reCAPTCHA is in Dutch. (Ik ben geen robot)
What I want is, when a visitor is switching to English, the warning in reCAPTCHA is also in English (I’m not a robot).
Do you know how to fix this? (coding os not a ploblem)
Thanks you.
Regards,
Albert
Hi Albert. Sorry, that’s not a question we can easily answer via comments, but we do help OSTraining members to solve problems like that: [url=https://www.ostraining.com/support/]https://www.ostraining.com/…[/url]
Steve, in the mean time I have found the solution on internet.
Nice work, Albert!
This worked well for me – but I’m having trouble figuring out how to create an extra simple verification process. No matter how I change the security level on the google admin page (ie down to the simplest, where I’d just the user to just click the box and a second later show a checkbox), it seems to always show images for the user to validate. Is there something else on the site needed to ensure this simpler verification appears? I’m not on HTTPS for reference, not sure if google uses that as an indicator of what verification to display.
]https://uploads.disquscdn.c…[/url]
[url
Thank you for this very clear step-by step tutorial – I passed it onto a client who was able to DIY this with your help.
I used to get a lot of spam sent through my lead forms but now I use uCalc for lead forms on my website. They have no captcha but still no spam at all – that must be some kind of a special protection there.
EXCELLENT! Many Thanks Valentin, for the concise and accurate explanation & directions. You, my man, are a God-Send.
Hi all,
i followed your tutorial but i cannot see the recaptcha box. I just see [recaptcha] on my contact form… Any idea?
I did this part as you described in the tutorial. But at the top of my reCaptacha admin page , I get this We detected that your site is not verifying reCAPTCHA solutions. This is required for the proper use of reCAPTCHA on your site. Please see our developer site for more information.
There is a client integration step and server integration step out there. How do we do this ?
[quote=George Thomas] There is a client integration step and server integration step out there. How do we do this ?[/quote]
Hey, George. Could you elaborate on the two steps, please? What are they? I don’t think we ever mentioned them in our post.
As for the error you are getting from Google, please re-visit our Step #3 and check if you entered valid Secret and Site Keys into their respective fields.
Cheers.
I did exactly the steps as you gave in this article. The reCaptcha is working fine. However when I go the reCatpach admin page I get this alrert.
“We detected that your site is not verifying reCAPTCHA solutions. This is required for the proper use of reCAPTCHA on your site. Please see our developer site for more information.”
in the reCatpcha admin page here is how google instruct to add reCaptcha to the site ‘
Keys.. I added site key and secret key as mentioned in the tutorial, but in step 1 and step2 google say the following.
My question is the reason I get the alert above, is since I didnt do Step1 and step2 as google said ?
Google reCaptcha admin page
Step 1
“Paste this snippet before the closing tag on your HTML template”
Step 2
Paste this snippet at the end of the
Hi, George. If your Google Re-Captcha works fine with your Contact Form 7, you can safely ignore that error message you see in your Google Re-Captcha admin account.
I assume, besides integrating Google Re-Captcha with your Contact Form 7, you might have done something else, trying to follow Step 1 and Step 2. You don’t need to.
Those two steps are for integrating Re-Captcha with a site manually, using Google API. You already have Contact Form 7 plug-in done for you what those Step 1 and Step 2 would do.
If that message bothers you, simply delete everything you did besides setting Re-Captcha under the Contact Form 7 control panel.
Cheers.
Thank you so much. I didnt do anything other than integrating Google Re-Captcha with your Contact Form 7. Since i see that alert message, I was asking shall I do the step1 and and step2. the reCaptcha is working fine so I am ignoring that message
Thank you so much for the advice
George
You are most welcome!
Everything is working correctly using recaptcha/contact form 7/wordpress, except if a user doesn’t click in the captcha box to verify they are human, it doesn’t produce an error message. The wheel spins, then nothing happens. If the user clicks the box to verify, message is sent. Any ideas on why this is happening?
When I put the recaptcha above the send, it disables the send button? the recaptcha works. However if I put the recaptcha above the Name line, the send button works?
Hi, Fantastic clear instructions – it almost seemed too easy. However I think I’ve done something wrong. I can see the captcha no problem, but now from my website you can’t enter text into the fields of the form?? It’s like I’ve locked it.
AWESOME! Thanks so much for the VERY clear instructions!!
Boom, worked straight away, thanks!
Every time I add the reCAPTCHA tag to my form, the form stops working.
It works fine until I add that tag.
The reCAPTCHA image shows up just fine.
But when I submit the message, I get the standard error message asking me to try again later.
Any idea what the issue is?
Great tutorial but when I add reCaptcha tag to my form, save it and view it on my homepage, the reCaptcha box is not visible?
I am using the latest version of WordPress Version 5.1.1 and the latest version of Contact Form 7 – 4.3.1
sorry dosnt’exite i don’t see my recaptcha
Hi, great example. Is there a way to add two recaptchas?
[quote=Fred Atkinson]Every time I add the reCAPTCHA tag to my form, the form stops working.
It works fine until I add that tag.
The reCAPTCHA image shows up just fine.
But when I submit the message, I get the standard error message asking me to try again later.
Any idea what the issue is? [/quote]
I am having this same issue. It’s frustrating because it doesn’t give any information as to how to solve the problem. My form (a basic form in Contact form 7) has been working, but now that the captcha is added, when I try to submit it says “There was an error trying to send your message. Please try again later.”
Any suggestions?
This is an amazing tutorial! Thank you very much, it was very beneficial to me.
Hi, Valentin! Thank you for this simple and helpful tutorial. Having followed all these steps, I’m getting a warning from Google, “We detected that your site is not verifying reCAPTCHA solutions. This is required for the proper use of reCAPTCHA on your site. Please see our developer site for more information.” It’s sending me to the developer site, to a section on “Verifying the user’s response.”
Form is located at https://tzivia.com/contact-me/
I notice someone had this same problem a few years ago, wondering if you can think of a solution. Just verified that the keys are correct, is there anything else I need to check?
Thank you!!
how to add contact form in captcha,, not enable captcha