Adding Google reCaptcha v3 to the Shopify contact form

Highlighted
Shopify Partner
7 0 1

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?

1 Like
Highlighted
New Member
1 0 4

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

4 Likes
Highlighted
Shopify Partner
2 0 0

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

0 Likes
Highlighted
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

0 Likes
New Member
1 0 0

works like a charm. Thanks!

0 Likes
Highlighted
Excursionist
27 0 17

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.

1 Like
Highlighted
Tourist
7 0 5

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

0 Likes
Highlighted
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?

 

 

0 Likes
Highlighted
Excursionist
23 0 1

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

1 Like
Highlighted
New Member
1 0 0

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>

0 Likes