Recaptcha only showing on reload

Hi,
I am currently having issues with deploying a netlify form on my website.
I have implemented the contact form, and enabled it to work with netlify, then added a recaptcha to the form.
However, the recaptcha only shows when I reload the page (not the first time the page is loaded).
Has anyone experienced this issue or can help me with this?
The page is cameronwickes.com/contact
Code for the form is at:
https://github.com/cameronwickes/cameron-wickes/blob/master/components/ContactForm.vue
Thanks in advance!

hi there, welcome.

i did a search of our forums and this sounds like the same issue:

can you work through this thread and let me know if this is helpful? thanks!

I am having the exact same problem as above. I am also using vue.js and gridsome
1.Going directly to the contact page by pasting the /contact page URL. — Recaptcha works.
2.Going to the contact page through the nav menu on the home page. ----Recaptcha doesn’t work and the form doesn’t send.
3.If you go to the contact page as in example ‘2’ no Recaptcha, but if you hit reload Recaptcha shows up.
I believe it has to do with the form not rendering properly with the link.

Contact page that works on reload shows form name first:

<form name="contact" method="POST" data-netlify-recaptcha="true" class="contact-form" data-v-6db67935>

Contact page that doesn’t work from nav link shows form “name” after vue data attribute data-v-6db67935 :

<form data-v-6db67935 name="contact" method="POST" data-netlify-recaptcha="true" data-netlify="true" class="contact-form">

Vue and Netlify form not playing nice?
I have tried everything in the docs and forum. I added to this thread because it looks like this fellow gave up and removed Recaptcha on his form and now uses a honeypot instead, he never got back to you. i suppose I could do the same thing but it would be helpful for me, others, and Netlify to find a solution.
here is my form code, I don’t think I missed anything but have a look:
`


      <div>
        <label for="name" class="label">Your name</label>
        <input type="text" name="name" />
      </div>
      <div>
        <label for="email" class="label">Your email</label>
        <input type="email" name="email" />
      </div>
    </div>

    <div class="message">
      <label for="message" class="label">Message</label>
      <textarea name="message"></textarea>
    </div>
      <div data-netlify-recaptcha="true" ></div>
    <button class="button">Submit form</button>
  </form>`

here is the site: https://www.richwalton.dev/contact
(if you click that link it will work,but go to home page and click ‘say hi’ in the nav bar and your back to it not working)
thanks,
Rich

This seems to be the same issue:

It’s solved by adding a trailing slash after /contact when you navigate using the top menu, which causes external assets like Google’s recaptcha scripts to load. As you can see, my suggestion in that thread did not work and I’m a bit at a loss as to how to force the recaptcha to load :face_with_monocle:

@richwalton, I think the reason the recaptcha doesn’t load is because Gridsome/Vue tends to do client-side routing on subsequent page navigation. So when the visitor goes directly to the form, things work because the page was loaded directly, but when navigating to the form from the home page, the form is not loaded from Netlify but is rendered via javascript on the browser. You could render your recaptcha via javascript using https://docs.netlify.com/forms/spam-filters/#custom-recaptcha-2 instead.

1 Like