Article Outline
- My Issue was PEBKAC
- Other steps to try
- Quick refresher on how to merge Contact Form 7 to reCAPTCHA on WordPress
- Very Lost? Try these resources…
- 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:
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:
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:
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.
- 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 pluginitiswho 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. - Test the form without reCAPTCHA: If the form doesn’t work when you remove reCAPTCHA, then it’s not reCAPTCHA’s fault.
- 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:
Refresher steps on how to connect Contact Form 7 to reCAPTCHA
- Log into your Google Account for the website / project: the one that has the reCAPTCHA account. And, “yes, Virginia,” it’s still free.
- 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.” - 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.
- 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.
- Log into your website admin. : Usually at
http(s)://{YourSiteHere}.com/wp-admin
- [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
- 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. - Fill in form fields: Take those keys out of your code editor / text document file.
- 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.
- ContactForm7.com/support: the source is always a great place to go to.
- Code of Geek reCAPTCHA Tutorial: I followed it. I like it.
- Google Developers Guide: If you’re like me and want to know the nuts and bolts about things.
- WordPress Support : For those who used the plugin to get reCAPTCHA in.
- Betterwp.net: this one also has pretty pictures.
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.“