On today’s adventure, my dear friend Cooper from Digital Assets Management asked me to implement reCATCHA to the contact forms on a flient’s site, using Contact Form 7, with “the little box to check that you’re not a robot“, and “a note that when emailed it says – from your website home page /// From your website Contact Page“. Easy enough. Let’s do it!
reCAPTCHA v2 for Contact Form 7
You can enable reCaptcha on the Contact Form 7 “Integration” page, though it’s for v3, since CF7 removed support for v2 and the [recaptcha] tag since December 2018. Personally, I’m not a fan of v3, I very much prefer v2 actually, and this is what the customer wants, so that’s what the customer gets! Lucky for us, there’s an easy fix for it, using the “ReCaptcha v2 for Contact Form 7” plugin. Simply install, activate, and then you’ll find another submenu under “Contact“, called “reCaptcha Version” which allows you to change it to the version you wish to use. Just make sure to set up your keys for v2 as well.
I’m not a robot
Or am I? No, I’m just a hero. The WordPress Hero! Jokes aside, once you’ve installed the plugin and set up your keys, it’s as easy as 1-2-3!
Contact Form 7: identify which page is being sent from
Next step: making sure every contact form can tell from which page it was sent from. Easy enough if you have multiple forms you can identify them individually, right? But what if you are using the same form for multiple pages, or in a global part of your website such as the footer or a sidebar? Well, there’s a nice workaround for it too. Don’t start duplicating your forms and labeling them for each page, just make use of the [_url] tag on the “Mail” part of your form.
Thanks to this little tag, I was able to quickly set up every form to inform where the emails are sent from. And good thing I did find this workaround, since one of the forms was in way more pages than I was told at first! All of the pages fixed in one fell swoop! Tons of work saved. Actually, I’m not sure why CF7 doesn’t use this as default instead of the base URL. But there you have it! Now you know.
Bonus
I’m always one that goes for the extra mile. If I see something else that’s broken or something where there’s room for improvement, I’ll be all over it (of course, informing the customers first for them to know and approve!). In this case, I found out some of the forms weren’t properly set up. The “Form” part of it was relatively “ok” (some tags were left as default, for instance, “checkbox-456”, or using “number” instead of “tel” for a phone field, things like that), but worse of it, the “Mail” part of it was completely wrong. I can’t imagine the amount of client’s info this company lost because of it. But not anymore!
For reference, this is one of the forms:
Wrapping up
After I enabled reCaptcha v2 and the [_url] tag to all the forms, I browsed the entire site to find the other forms that were available and cleaned up copies and unused ones, I fixed the ones that needed fixing and I properly tested all the forms, of course, to make sure all are working properly. All of that plus other minor fixes requested along the way, all in all just a bit shy over an hour and a half of work! It actually took me way longer to set this blog post! So thanks for reading!
Recent Comments