Gatsby - Form seems to work only once due to browser cache

Support
1

Hi !
I have an issue with the form served at Bl-Hud (elated-carson-9071e0 on netlify). The form is using netlify’s captcha.

The build is fine, the form name appears just fine in netlify UI and I’m able to receive submissions, but only on the first navigation to the site. After that, the captcha does not appear anymore and the form does not work anymore unless I clear the browser cache.

Indeed when I open the dev tools, I can still see the data-netlify=true attribute on the form.
When I clear the cache, the attribute disappear and everything is fine.

any hint ?

Here’s the form code :

<form name="contact" method="POST" data-netlify="true" data-netlify-recaptcha="true">
      <p>
        <label>Email address:</label>
          <br>
        <input type="email" name="email">
      </p>
      <p>
        <label>Message:</label>
          <br>
        <textarea name="message"></textarea>
      </p>
        <div data-netlify-recaptcha="true"></div>
      <p>
        <button type="submit">Send</button>
      </p>
    </form>
2

It’s probably because of your service worker. On first load, it’s caching up to around 25 MB! A typical blog probably doesn’t need that much. It seems to be caching Google ReCaptcha scripts too:

image

So, that might be a possible cause. Try removing the service worker or control what it caches.

3

Nice find @hrishikesh!

@MakanWG are you using gatsby-plugin-offline?

–
Jon

4

Very nice catch @hrishikesh !
Disabling the service worker did the trick !
Thanks !

5

Yup, I followed the tutorial at gatsby-plugin-offline | Gatsby to remove the service worker and this solved my issue.

2 Likes