Press Your Luck.
Google / AdWords, Bing / Ads, and even Facebook...

[WordPress] Contact Form 7 and reCAPTCHA Issues Solved...8 Years Later.

It's not my fault. I swear. Don't judge me.

June 11, 2016.Finn.1 Like.24 Comments
Home/Blog/Blogging/[WordPress] Contact Form 7 and reCAPTCHA Issues Solved…8 Years Later.

Article Outline

  1. My Issue was PEBKAC
  2. Other steps to try
  3. Quick refresher on how to merge Contact Form 7 to reCAPTCHA on WordPress
  4. Very Lost? Try these resources…
  5. Addendum: Why it took 8 years (Don’t judge me).

After 8 years, I finally figured out how to get Contact Form 7 to work – with reCAPTCHA – on my WordPress site. But it’s not my fault. I swear.

This time around when I tested it, I got the gist of the following error message:

“Please contact your administrator…”

So, since I am my administrator, I told myself that after 8 years:,

“Fuck it. I’m going to actually sit down and figure it out.”

Here’s what I found:

The issue was PEBKAC as a result of a Copy & Paste problem.

Before we begin, Katie wanted to know what PEBKAC means.

In short, “Problem Exists Between Keyboard and Chair.” AKA: the user fucked it up.
XKCD puts the concept in motion with the comic below:


Problem Exists Between Leopard And Chair


Remember to scroll over the image to read the title tag!

And for a deeper explanation, read this.

The problem was I forgot how to copy & paste from a webpage. So, “yes”, PEBKAC. When I would copy the reCAPTCHA “secret” key and paste it into the Contact 7 form field, I’d copy the table it was in along with it. Initially it would sound like a complete dumbass mistake but for two things:

1) When I highlight the secret in reCAPTCHA, it doesn’t show me that I am highlighting the table as well.

It looks like this:


reCAPTCHA-secret-key-snafu


And, “no,” that’s not my “secret.” At least not anymore…[ JK ]

I pasted in the key. I didn’t realize it pasted the table as well.

2) WordPress blocks out the characters in the “secret” key.

When I paste the secret key in, it turns it to:

“************************************ABC”

No. Not really, “ABC,” but the last 3 characters of the secret code. They probably do that to give the owner a hint. All the hint did to me was throw me off even further.

I never saw the code characters that preceded the secret key when I pasted it in.

It wasn’t until Katie made me perform diagnostic steps to test everything.

Further proof she’s smarter than I am.

At that point, I pasted the key into Google Docs – just to see what markup characters would come along. I got this:

recaptcha-secret-key-with-markup-shit

No. This isn’t my “secret” code, either. I promise. I used kissmyass.now as my domain example in reCAPTCHA.

Yup. Box, border, and all.

[SOLUTION] Don’t be me. Always rinse whatever you want to copy & paste through a code editor or text editor before you paste it into your fields.

That way, you get out all the markup code shit that comes from word processors or websites. Otherwise, you, too, can have 8 years of a contact form-less website.

I hope this helps. Here might be other steps to try.

  1. Re-do the setup from scratch: The diagnostic approach does a pretty bang-up job of figuring things out. Start as far back as reading the documentation for Contact Form 7 and reCAPTCHA. If you are a WordPress user, the task is usually pasting the reCAPTCHA form fields into the Contact Form 7 Integration fields and sticking the custom name of [recaptcha] in the form’s WYSIWYG editor around the “send” button. Some like it before, some like it after.

    For those with pluginitis who actually use the Contact Form 7 reCAPTCHA Extension plugin, there will be little extra crap at the end like [recaptcha recaptcha-23], so make sure you got to your plugin’s settings to see which one you need.

  2. Test the form without reCAPTCHA: If the form doesn’t work when you remove reCAPTCHA, then it’s not reCAPTCHA’s fault.
  3. Contact the hosting company: At the time of this writing, this site is on WP Engine managed WordPress hosting. Some have claimed that managed WordPress hosting companies will have default settings that will mess with it. Contacting your hoster might help. Exhaust the other options first. From recent experience, nothing is worse is contacting their support staff on chat just as you figure out the problem yourself 30 seconds in.

Try not to end the online chat with your hosting company by having to go, “sorry, NVM.” You’ll feel infinitely less embarrassed. Try all other options first, then take a 30 minute break to let your brain rest and see if comes up with anything else first. Even let it sit a day or two – if urgency allows it. Your ego will thank you from keeping you from feeling like this:


donky-ass-pixabay


Refresher steps on how to connect Contact Form 7 to reCAPTCHA

  1. Log into your Google Account for the website / project: the one that has the reCAPTCHA account. And, “yes, Virginia,” it’s still free.
  2. Go to https://google.com/recaptcha : If this step doesn’t look familiar, then you might have your issue. You have to have access to your reCAPTCHA for security, validation, stats…

    “Is reCAPTCHA free?”
    “Yes, Virginia, reCAPTCHA is free.”

  3. Click to blue “Get reCAPTCHA” button on the top right of the page, go to the management section (sitting front and center on the new page), and pick your site: If your site isn’t found here. Make one. Follow their instructions.
  4. Put the Site Key and Secret Key in a code editor or text document : Not sure what a code editor / text document is? If you have Adobe Suite, then you have Dreamweaver. Open a new file and paste those keys in. Or, my preference, download Sublime Text Editor. It’s free and will purge the markup gunk. Just open up a new file and paste those numbers in. Too lazy to download? Windows: use Notepad. Mac: use Text Edit (Format >> make plain text.
  5. Log into your website admin. : Usually at http(s)://{YourSiteHere}.com/wp-admin
  6. [WordPress] In your website’s sidebar navigation, go to Contact >> Integration >> : This is where you’re going to put the Google reCAPTCHA Site Key and Secret Key
  7. Website sidebar navigation >> go to Contact >> Contact Forms >> [Pick the form you’re working in]: Make sure the [recaptcha] is in the form around the send button depending on your preference.
  8. Fill in form fields: Take those keys out of your code editor / text document file.
  9. Test. Test. Test.: Don’t take it for granted.

If you’re still lost in the tall trees, try these additional resources to go with the Contact Form 7 and Google reCAPTCHA documentation.

There’s even a good video on how to go through the steps



Addendum: Why it took 8 years.

Funny story. Over 8 years ago, when Jonathan Thomas of Anglotopia.net helped me start my website on GoDaddy from his basement while we were watching Doctor Who, I knew enough HTML to align an image (because “floating,” sounded too complex at the time and didn’t always work in my WordPress 1.whateverversion template) to blog. This site became my experiment site. I didn’t have time for much else because we worked 60-80 hour weeks at the ‘ole agency.

reCAPTCHA and Contact Form 7 didn’t work out of the box, I didn’t have time to finish it, and I didn’t have money to pay anyone.

Then I went from the ‘ole agency to the ‘ole tech company to “Project 1” and “Project 2,” which were WordPress by nature, but they demanded my attention to get them off the ground. Right when I started to have time, Chris came to me about an idea for a universal export system. We kicked it around and turned it into an agency-level e-Com focused PaaS. At that point, it was to be believed that once there was an importer ready, we’d migrate my site over to the new system.

Time passed and now there are new WordPress features that are out that are different from what we are planning to do for our platform, and WordPress became relevant to me again.

But, from the time I first started my website to WordPress becoming relevant to my site, again, 8 years passed.

As Willie sings, “Ain’t it funny how time just slips away.

Anyway, let me know if this helped. I’d like to know I wasn’t the only one.

  • Valentino

    I did the same mistake ahahahah

    • natfinn

      Ha! Well, I’m glad I’m not the only one.

  • Pad10

    Nice Article, save couple of hours trouble.

    • natfinn

      I’m glad my suffering helped others. 🙂

  • Thank you!! Lifesaver 🙂

    • natfinn

      Ha! Glad this helped.

  • Thank you! I have been so aggravated by spam I started replying to the idiots cursing them out! Haha… I just couldn’t figure out why the stupid plugin wasn’t working and there was no apparent solution anywhere else. Copying the key into notepad first then pasting it into the field worked.

    • natfinn

      Glad to hear it. Good call on the Notepad.

      I always hear people go, “yeah. I got it to work first try,” and I hated them. I loathed them. I was jealous. This was like an exclusive club.

  • Gerry

    Hello mate !!!

    Thank you so much for writing this article !!! I solved my problem !! have a nice day !!

    • natfinn

      Thank you! You, too.

  • You’re not alone. I’ve been battling this all afternoon for the exact same reason. Works great!

    • natfinn

      I’ve got a Googler buddy who points out that “pasting values only” does the same thing. Things learned the hard way I suppose. Glad you figured it out faster than I did.

  • Andrew Wilkerson

    Loved reading this. Been two years for me but slightly different, my captcha doesn’t work on Apple devices, Safari, ipad, iphone, but hey, maybe in 8 years I’ll find a solution to that. I started with Godaddy 13 years back. Moved to WordPress 2 years back and have since become a full time Googler of problems and reader of forums! I may just remove my captcha and start abusing spam robots again.

    • natfinn

      On Apple devices? Odd. Are you doing any asynchronous JavaScript or lazy loading on that website?

  • Robyn Adams

    You are my new hero. I SO relate to your whole thought process.

    • natfinn

      There are others who think like me? Oh, the places your thoughts must go! 😀

  • David Collett

    I had done exactly the same thing. Thank you!

    • natfinn

      Glad it helped!

  • Isaac Daniel Anderson

    Helped me!!! Thanks 😛

    • natfinn

      Awwwyeah!

  • Raunaq Kapoor

    Can someone help me out on how to go about implementing invisible reCaptcha.

    • natfinn

      Where are you having the issues?

  • Roger Wolfendale

    Thanks natfinn, that really helped me diagnose what was wrong. My problem wasn’t the key pairs but the set up for recaptcha. I did my diagnosis in Plugins, Installed Plugins, Google Captcha Settings where you can test whether it works or not. I had 2 problems; Firstly I’d set up my keys as a sub domain off my main domain i.e. mysubdomain.server.net, it only worked when I used server.net. Secondly, you don’t actually need [recaptcha size:compact] in the contact form so I removed it and it all worked fine. Thanks again for stimulating me to diagnose further!

  • Acuarel Web

    Hi there.
    I’ve had the same issue today and yep, it was a copy paste issue, but afaik, there is another issue with both CF7 and reCaptcha.

    For being able to use reCaptcha both on CF7 forms and the login forms you need to add your secret keys also on the settings area (Settings->reCaptcha options)

    But doing so, will throw an Javascript error everytime you enter a page containing a CF7 form, because recaptcha api is being loaded twice (The error appears like ‘Uncaught Error: ReCAPTCHA placeholder element must be empty’)

    Someone out there facing the same problem?

    Regards, Cancrexo

Privacy Policy | Copyright 2008-2020