How can I delay the loading of Google's recaptcha code in Webflow until a user reaches the form, specifically on form pages and not the entire website, in order to improve website speed?

TL;DR

Remove global reCAPTCHA scripts and manually include them only on form pages.
Use an Intersection Observer to detect when the form enters view, then dynamically load and render the reCAPTCHA with grecaptcha.render.

To delay the loading of Google's reCAPTCHA code only when a user reaches the form (and avoid loading it site-wide at initial load time), you can implement a conditional lazy-loading strategy in Webflow using custom code.

1. Set reCAPTCHA to Manual Load

By default, Google’s reCAPTCHA script loads immediately if embedded in the page head or body.
To delay it, do not embed the reCAPTCHA script globally (e.g., in Project Settings or the global Custom Code area).
Instead, plan to load the script dynamically only when the form enters view.

2. Add reCAPTCHA Site Key to Form Page

Make sure your Google reCAPTCHA Site Key is available in a script tag or a data- attribute on the form element.
You’ll need it to render the reCAPTCHA programmatically later using grecaptcha.render.

3. Use Intersection Observer to Detect Form Visibility

On the form page, embed custom code in the Page Settings → Before </body> tag, like this (remember to replace your-site-key-here with your real site key):

<script>
// Only run this script when the DOM is ready
document.addEventListener("DOMContentLoaded", function() {
  let loaded = false;

  // Target your form container or reCAPTCHA div
  const target = document.querySelector('#recaptcha-wrapper');

  if (target) {
    const observer = new IntersectionObserver(function(entries) {
      if (entries[0].isIntersecting && !loaded) {
        loaded = true;

        // Load the reCAPTCHA script
        const script = document.createElement('script');
        script.src = "https://www.google.com/recaptcha/api.js?onload=onRecaptchaLoad&render=explicit";
        script.async = true;
        script.defer = true;
        document.body.appendChild(script);
      }
    }, { threshold: 0.1 });

    observer.observe(target);
  }

  // Function to render the reCAPTCHA after script loads
  window.onRecaptchaLoad = function() {
    grecaptcha.render('recaptcha-wrapper', {
      sitekey: 'your-site-key-here'
    });
  };
});
</script>

Ensure your form has a container element (e.g., a div) with ID recaptcha-wrapper where the reCAPTCHA will appear.
Google will handle verification only after the widget is rendered via grecaptcha.render.

4. Apply Code Only on Form Pages

Place the script above only in the Custom Code section of relevant form pages, not in the global Project Settings.
This ensures the script doesn’t run or load reCAPTCHA on non-form pages.

5. Disable Default Webflow reCAPTCHA Integration If Needed

If you’ve already enabled reCAPTCHA via Webflow Forms settings, Webflow may inject scripts automatically.
In that case, remove the default reCAPTCHA integration and manually add your own reCAPTCHA div and rendering logic as shown above.

Summary

To delay Google's reCAPTCHA code in Webflow and load it only on form pages when the form is visible:

Remove global reCAPTCHA scripts.
Manually load the script using Intersection Observer.
Render reCAPTCHA programmatically using grecaptcha.render when the user scrolls to the form.
Include the logic only on form-related pages to control load behavior and improve overall performance.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer