Adding Google reCaptcha v3 to the Shopify contact form

Clint_Jackrabbi
Shopify Partner
10 0 2

I don't want to use a third party app to install google recaptcha V3 to my contact form in Shopify. It should be very simple to install on my theme's existing contact form. 

I've followed the instructions here:
https://www.google.com/recaptcha/intro/v3.html

Added this code to my header file right before the </head> tag (the correct key replaces the "recaptcha_key"):
<script src='https://www.google.com/recaptcha/api.js?render=recaptcha_key'></script>

And i've pasted this snippet of js on the contact form section of my shopify store (the correct key replaces the "recaptcha_key"):

<script>

grecaptcha.ready(function() {

grecaptcha.execute('recaptcha_key', {action: 'action_name'})

.then(function(token) {

// Verify the token on the server.

});

});

</script>

But I'm not sure what to do for step 2, "server side integration", or if I need to do anything with this.

And that's all I've done.

The captcha logo shows up on the contact form just fine but I just got more spam today and the recaptcha settings aren't reporting any activity. 

What am I missing?

Replies 59 (59)
emmapettingill
New Member
1 0 5

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

chrishughes
Shopify Partner
2 0 0

How to input recaptcha on shopify, I'm using Simple Contact Us Form App

Lea_Brack
New Member
1 0 0

Hi Emma

 

I managed to trace the " theme dot liquid file" First it didn't show, but then I heard from the Out of the Sandbox peeps it's called "include-contact-form dot liquid"

However I'm not familiar with code at all & don't know where my end </head> tag can be found? In my case, is it where the yellow star is? in other words, above line 76 and below line 75? Hope anyone can help

Screen Shot 2019-02-20 at 14.47.18.png

humanwrites
New Member
1 0 0

works like a charm. Thanks!

MDD
Explorer
53 0 46

Thanks you !  I followed your instructions and it worked great, so nice to have an easy solution that doesn't require a monthly subscription from Shopify's awful third party app marketplace that they use to strip functionality from their platform and resell to you as yet another nickel-and-dime "feature" they get a kickback from.

MaryFrances
Shopify Partner
8 0 11

I have 2 site keys from google. Which do I put where?

taskoftheday
Shopify Partner
2 0 0

Hi Emma,

 

I have tried to add the code in the head tag but nothing visible shows up on the contact page.

 

Did you do anything more then adding the 2 scripts and adding the Site key?

 

 

limitcracker
Excursionist
23 0 5

Hi, I am using the following simple code from Google but does not work also:

 

just before the closing </head> tag:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

inside the <form> tag in newsletter.liquid the following:

<div class="g-recaptcha" data-sitekey="WITH_MY_site_key_OFCOURSE"></div>

all those got it from the google guide here: https://developers.google.com/recaptcha/docs/display#auto_render

 

Any ideas why it's not working?

I tried also the previous suggestion on this thread but didn't work for me!

 

Thanks a lot for your time!

Br,

John

Kenneth_Montgom
New Member
1 0 2

Hello All, 

 

I successfully added this to two of my Shopify websites. One uses the Debut theme and the other one uses the Brooklyn theme.

If you guys haven't got it work just yet, here's what worked for me on both of my websites:

 

After signing up for reCaptcha v3 via my Google account, I copied the Frontend integration script (https://developers.google.com/recaptcha/docs/v3), also listed below and added it at the very top of my page.contact.liquid. I also added it to my newsletter.liquid, so that I don't get spam through that either. Be sure to replace the 'reCAPTCHA_site_key' with your actual site key in both places. I tested it by sending a message on the Contact form as well as by signing up for my newsletter at the bottom of my pages. On both, I was promoted to verify that I'm not a robot. I hope this helps and cheers! 🙂

 

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

limitcracker
Excursionist
23 0 5
@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.
kmoney52
Tourist
3 0 12

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

MaryFrances
Shopify Partner
8 0 11
 
kmoney52
Tourist
3 0 12

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

purelyalpaca
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


 

nyeung
New Member
2 0 0
Thanks for sharing this post. I’ll give this a try
Rocking
Explorer
49 1 12

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

purelyalpaca
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


Steve82
Excursionist
23 0 31

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
kmoney52
Tourist
3 0 12

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