Add reCaptcha to Contact Form 7 in WordPress

new recaptcha joomla

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.
ReCaptcha with Contact Form 7 in WordPress

Step #2. Get the reCaptcha public and secret keys

You need to generate keys for your domain:

new recaptcha joomla
  • Enter your site details such as label, domain and email owner:
new recaptcha joomla

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.
ReCaptcha with Contact Form 7 in WordPress
  • 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.

ReCaptcha with Contact Form 7 in WordPress
  • Go to Contact > Contact forms > Your form
  • Paste this shortcode to render the reCaptcha field just before the submit button:
[recaptcha]
ReCaptcha with Contact Form 7 in WordPress
  • Click the “Save” button.

Step #5. Embed the contact form in a page

  • Go to Contact > Contact forms.
  • Copy the shortcode of the form.
ReCaptcha with Contact Form 7 in WordPress
  • Go to Pages > Add new.
  • Paste the shortcode.
ReCaptcha with Contact Form 7 in WordPress
  • Publish the page.

Step #6. View the end result

  • Preview the contact page to see how it looks:
ReCaptcha with Contact Form 7 in WordPress

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

43 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Bosve Svensson
Bosve Svensson
8 years ago

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]

Iam
Iam
5 years ago
Reply to  Bosve Svensson

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?

Shane Piaggi
Shane Piaggi
8 years ago

hi there you need the
Contact Form 7 reCAPTCHA extension to get this working also.

Nick Savov
8 years ago
Reply to  Shane Piaggi

Thanks for note, Shane! It’s appreciated.

Nicolas Briard
Nicolas Briard
8 years ago

Thanks

Nick Savov
8 years ago
Reply to  Nicolas Briard

You’re very welcome, Nicolas! 🙂

Michael Kariuki
Michael Kariuki
8 years ago

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?

Nick Savov
8 years ago

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]

Rafique Suchwani
Rafique Suchwani
8 years ago

Thanks for the tutorial, it really helps.

Nick Savov
8 years ago

You’re very welcome, Rafique! Glad it helped!

aziz
aziz
7 years ago

Thanks for the simple way

Magic Tooltips
Magic Tooltips
7 years ago

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]

Florine
Florine
7 years ago

Thanks you very much 🙂

ivorybow
ivorybow
7 years ago

thanks so much for this Valentin. After about an hour of frustration with setting up ReCaptcha, I found your tutorial and it worked perfectly.

steve
steve
7 years ago
Reply to  ivorybow

That’s great to hear, thanks ivorybow

Albert Supheert
Albert Supheert
7 years ago

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

steve
steve
7 years ago

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]

Albert Supheert
Albert Supheert
7 years ago
Reply to  steve

Steve, in the mean time I have found the solution on internet.

Nick Savov
7 years ago

Nice work, Albert!

Patrick W. Crawford
Patrick W. Crawford
7 years ago

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.
[urlcomment image]https://uploads.disquscdn.c…[/url]

Susan Ward
Susan Ward
7 years ago

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.

Anonymous
Anonymous
7 years ago

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.

Rick
Rick
7 years ago

EXCELLENT! Many Thanks Valentin, for the concise and accurate explanation & directions. You, my man, are a God-Send.

mancio
mancio
7 years ago

Hi all,
i followed your tutorial but i cannot see the recaptcha box. I just see [recaptcha] on my contact form… Any idea?

George Thomas
George Thomas
6 years ago

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 ?

Alex Smirnov
6 years ago

[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.

George Thomas
George Thomas
6 years ago
Reply to  Alex Smirnov

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

where you want the reCAPTCHA widget to appear:

Adding reCAPTCHA to your site

Keys
Step 1: Client side integration
Step 2: Server side integration

Alex Smirnov
6 years ago
Reply to  George Thomas

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.

George Thomas
George Thomas
6 years ago
Reply to  Alex Smirnov

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

Alex Smirnov
6 years ago
Reply to  George Thomas

You are most welcome!

chris
chris
6 years ago

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?

Tiffany
Tiffany
6 years ago

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?

Renee
Renee
6 years ago

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.

cherholton
6 years ago

AWESOME! Thanks so much for the VERY clear instructions!!

Kazz
Kazz
6 years ago

Boom, worked straight away, thanks!

Fred Atkinson
Fred Atkinson
5 years ago

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? 

Deepak
Deepak
5 years ago

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

miomu
miomu
5 years ago

sorry dosnt’exite i don’t see my recaptcha

FaRa
FaRa
4 years ago

Hi, great example. Is there a way to add two recaptchas?

wildsoles
4 years ago

[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?

wpdeveloper
wpdeveloper
4 years ago

This is an amazing tutorial! Thank you very much, it was very beneficial to me.

Tzivia
Tzivia
3 years ago

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!!

meghana
meghana
3 years ago

how to add contact form in captcha,, not enable captcha

43
0
Would love your thoughts, please comment.x
()
x