Adding Google reCaptcha v3 to the Shopify contact form

Excursionist
20 0 1
@Kenneth_Montgom
Hi! That's great news but I ll have done this also and didnt apply.
Maybe I could try yours?

1. Did you put a div inside the form also?
2. You placed both script tags inside the newsletter.liiquid?
3. Could you please share the code snippet of the whole newsletter.liquid to try it out?

Thanks a lot! You might save me money and time.
0 Likes
Tourist
3 0 3

@limitcracker  This is @Kenneth_Montgom.  I simply copied the one script that I provided in my comment and pasted it at the very top of those sections and replaced the key portion that I listed in bold.  That’s all that I did.  I didn’t add it inside of a <div> or add any additional tags, enclosures, etc.  I saved the changes then refreshed my browser and tested that it worked on both the contact page and the newsletter section.  I hope that helps.

0 Likes
Tourist
7 0 2
 
0 Likes
Highlighted
Tourist
3 0 3

@MaryFrances 

 

OK, I just added the reCAPTCHA v3 functionality to a third website.  The Shopify theme that I am using is: Narrative.  Note: This also worked like a champ on my other two sites that use the Debut and Brooklyn themes.  Below are the specific steps that I followed that works for me. I will be as specific as I can in describing every step that I took.  I hope this enables you to be able to add it to your Shopify website too.

  • I created a brand-new Google Account via the Chrome browser. If you already have one, just login to it.
  • I opened up another tab, and visited the reCAPTCHA site listed here: https://www.google.com/recaptcha/
  • I clicked on “Resources”, then “Get Started” link options
  • On the Left side, I selected “reCAPTCHA v3”
  • Towards the top of the page, I clicked on the “here” link at the end of this sentence, “reCAPTCHA v3 returns a score for each request without user friction. The score is based on interactions with your site and enables you to take an appropriate action for your site. Register reCAPTCHA v3 keys here.”.
  • On the “Register a new site”, page, I entered my website under the “Label” section (ex: MyWebsite.com)
  • I selected the radio button in front of “reCAPTCHA v3”
  • Under the “Domains” section, I enter my website again
  • Under the “Owners” section, my Gmail email was already populated, because I was logged in already.
  • I clicked on the “Accept the reCAPTCHA Terms of Service” box then pressed the “Submit” button at the bottom of the page
  • I was then taken to the “Adding reCAPTCHA to your site” page that listed a SITE KEY and a SECRET KEY. I copied both of them to a text file and saved them in a safe place.
  • Towards the top, right, I clicked on the “See client side integration” link
  • On the “Frontend integration” page, I scrolled down to the “Actions” section and copied the script that was listed:

14)   <script>
  grecaptcha.ready(function() {
      grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'});
  });
  </script>

  • I logged into my Shopify site and selected “Online Store” on the left side, then “Actions -> Edit code” on the right.
  • Under the “Templates” sections, I scrolled down to and clicked on the “page.contact.liquid” to open it.  
  • At the very top, above the <div class…> line, I pasted the script that I had copied previously.
  • I replaced “'reCAPTCHA_site_key'” with my actual SITE KEY that I saved off earlier then pressed the “Save” button in the top, right corner.
  • I then Opened up a new tab and went to my website and navigated to the “Contact” page.
  • I proceeded to sent a test message. When I hit the “Submit” button, I was presented with the “I’m not a robot” reCAPTCHA box.  I clicked on it, and I had to click on the appropriate boxes.  It worked like a champ.  It also worked just fine when testing on my iPhone.
  • Next, I also, wanted to add the script to my Newletter signup section, so I expanded the “Sections” category and opened the “newsletter.liquid” file.
  • As before, I scrolled all the way to the top, above the <style> section or any other stuff that might be up there and pasted the same script as I used before. It’s easy to just copy it from your “page.contact.liquid” file. I then saved the file via the “Save” button in the upper, right.
  • I refreshed my browser and then scrolled to the bottom and attempted to sign up for my newsletter. As expected, I was prompted with the “I’m not a robot” prompt as expected.   It also worked like a champ on my iPhone as well.

Well, that’s it—every single step that I followed to get the reCAPTCHA prompt to come up when sending a message via my Contact form as well as signing up for my Newsletter section at the bottom. If you follow these steps and are still having problem, unfortunately, I don’t have any additional information that would be helpful.   I hope that you’re able to get it to work.  Cheers!

3 Likes
New Member
2 0 0

Thanks!  That was easy!  We were getting SPAM account creations like

LERWTMVMWWTWEMWQ

 


@emmapettingill wrote:

Hi Clint,

 

This is what I did and it worked. I added recaptcha version three copied the code

 

 
  <script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
 
<script>
  grecaptcha
.ready(function() {
      grecaptcha
.execute('reCAPTCHA_site_key', {action: 'homepage'}).then(function(token) {
         
...
     
});
 
});
 
</script>

 

I replace "reCAPTCHA_site_key with the site key provided by google when signing up for reCAPTCHA. I then went to customize my theme, actions dropdown, edit code. Then I went into the theme.liquid file and pasted the code above right before the end </head> tag.

 

Hope this helps


 

0 Likes
New Member
1 0 0
Thanks for sharing this post. I’ll give this a try
0 Likes
Tourist
15 0 2

You didn't need to use the secret key at all? How did you verify your site with Google?

0 Likes
New Member
2 0 0
I found that the change worked at first but then didn't so I "bent over" and
am now paying for an app :(

Shop Protector


0 Likes
Tourist
11 0 2

Added this, appeared to work when I went to the page. Didn't stop the bots. Every hour there is a new account created. Shopify needs to stop this because it is going to blacklist/spamlist their ip addresses.

Fine Art Landscapes - Sawusch Photography - USScenics.com
0 Likes
Tourist
3 0 3

@Steve82  

 

That's unfortunate. It seems to work for me. I detailed all of the steps that I did to enable it across three of my Shopify websites in an earlier comment. I test it often and I've only had one recent instance where I was allowed to submit an email address without having to complete the captca. When I reloaded the page, and tried again, it required the captca as I would have expected. I don't have any recent spam accounts nor have I received any spam bot based emails. I hope you can get it to work.

 

I took a quick glance at your website--awesome work! One app that you might want to think about adding is called "AntiCopy". I had a lot of my images and product descriptions stolen from one of my website only to do a Google search and find them being sold on another website.  The AntiCopy pretty much blocks people from being able to right click and steal your images. The subscription costs me $1 month and here's what it blocks:

- Disable right click on images
- Disable right click on web page
- Disable drag & drop
- Disable keyboard shortcuts (cut, copy and view-source)
- Disable text selection
- Prevent your store from being loaded via 3rd party site frame of iframe

 

Feel free to check it out and cheers!

 

0 Likes