How To Delay Recaptcha Load OR Isolate It To Form Pages

Design help Custom code
1

Hi,

Does anyone know how to delay Google’s recaptcha code from loading until a user:

  1. Gets to the form eg. bottom of the home page, lazy load
  2. Only loads on form pages, not the entire website

?

It’s slowing down my website.

Here is my site Read-Only: [LINK][1]

2

Hi :smiley:

Can you please also share the link of your live website? so I would like to see how the network goes.

Thks!

3

Sure thing: https://anitat.co/

4

Hi Anita,

I have checked your website, and the speed is good!

The recaptcha is already being the last thing loaded:

Screenshot 2023-07-21 at 08.02.23
Screenshot 2023-07-21 at 08.02.231458×229 31.1 KB

But if you still want to lazy it, you can set it in the body custom code on the pages you have the captcha and you only want to display when achieve a Y scroll. First wrap the captcha into a div block and create a class to the div block as “captcha-box”, then follow the code:

<script>
var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 1500 && !document.getElementsByClassName("w-form-formrecaptcha")[0]) {
    $(".captcha-box").append('<div data-sitekey="6LfALpImAAAAAOaLCNOsukjLZPjgyqSKEXVp4ggK" class="w-form-formrecaptcha recaptcha-2 g-recaptcha g-recaptcha-error g-recaptcha-disabled"><div style="width: 304px; height: 78px;"><div><iframe title="reCAPTCHA" src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=6LfALpImAAAAAOaLCNOsukjLZPjgyqSKEXVp4ggK&amp;co=aHR0cHM6Ly9hbml0YXQuY286NDQz&amp;hl=en&amp;v=iRvKkcsnpNcOYYwhqaQxPITz&amp;size=normal&amp;cb=e3bgoelc1ife" width="304" height="78" role="presentation" name="a-pwuek24cgrb5" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></iframe></div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea></div><iframe style="display: none;"></iframe></div>');
  }
};
window.addEventListener("scroll", myScrollFunc);
</script>

To know the Y number of the the page, you can go to the page, open console and write down “window.scrollY”, only set this code on the body you want the captcha, do not forget to wrap it into the div classed as “captcha-box” and delete the captcha element before publishing.

If worked, just set this comment as solution and if you need more help in the future, contact me via instagram, we can share and work together :smiley:

https://www.linkedin.com/in/alexis-matos/

5

I might need you to rephrase this a little.

  • What is a Y number? Is that the 1500 bit and do I need to change it in the code?
  • When you say console, are you meaning the webflow console?

When you say delete the captcha element before publishing, what do you mean? As then this would remove my recaptcha… (?) unless I am misunderstanding?

6

Hi Anita,

The Y number is the position in Y axis of the page, for example: The beginning is 0px.

You do not need to change the number, only if you want. This number is the position in Y of the page, 0 is the beginning, so when the page achieve the position in Y = 1500px, the page will create the captcha element into the div with the class “captcha-box”.

If you want to change this number, you can to your website in the browser, right click with the mouse, go to inspect (if you use safari, google how to open inspect), then click on console, go to the part of the website you want to create the captcha and then type on console: window.scrollY - it will show you a number, then if you want to show in that Y position you change the Y inside of the if from 1500 to this number.

Console is inside of the inspect when you click with the right click on the page and go to inspect → console

Yeap, you can delete the recaptcha, because the code that I wrote will create to you automatically. but, remember to create a div withe the className of captcha-box on the place

7

This works thanks so much.