Netlify Forms with Vuepress Issue

Hello Netlify Community!

I’m having an issue getting netlify forms to consistently run on my vuepress website hosted with netlify. If you navigate directly to a route with a form all is well however if you navigate to the page using the normal menu system the form doesn’t work unless you refresh the page.

Any ideas?

hi there, sorry to be slow to reply to you.

is this still an issue?

two things I want to pass along:

and maybe there is something in our general debugging guide that would be helpful?

if not, please let us know and we can do some more troubleshooting with you.

Thanks Perry,

I ended up removing the recaptcha which solved the issue for now (I am receiving submissions now). I tried to add a custom captcha as noted in some of the other forum posts however I wasn’t able to get that to function as expected. For custom recaptcha I followed these instructions: Are these complete?

Hey @avidnewmedia,
It’s possible we need an update there! The first thing that comes to mind is this other post where someone ran into issues with the custom reCAPTCHA:

Could you take a look and let us know if that looks like what you ran into? If not, could you please share your full form code (I know you said you’ve removed it for now, but if you have it in git and could drop it here for us to take a look, that’s be super helpful)?

HI Jen,

I did take a look at that post however I was still unable to get things to work as expected. Below is a link to a snippet of what my form used to look like. Ignore the custom <Icon> vue component code.

Hey @avidnewmedia,
Unfortunately I can’t visit that link, even after logging into Gitlab :frowning: Can you drop a code block in here?

Strange, it’s a public snippet but it’s not available. Below is a link to a codepen with the content dumped into html.

Hey @avidnewmedia,

Looks like you fell for pitfall 1, based on the snippet:

You need to have a netlify or data-netlify=true attribute in your HTML <form …> definition.

I presume you removed this when you added data-netlify-recaptcha="true" when you need them both. No harm done! If you re-introduce the recaptcha, do bear this in mind :+1:.

Hey @Scott,

I included both tags on the form in my implementation. It’s in the codepen. netlify data-netlify-honeypot="bot-field--contact" data-netlify-recaptcha="true".

It’s strange because the captcha worked, but only on page refresh. :man_shrugging:

Welp, looks like it’s my eyes which are the pitfall! :face_with_hand_over_mouth:

You may want to go back and check a deploy where you included the reCAPTCHA, giving the HTML a check and seeing if it’s built correctly as per the :point_up: guide.

Besides this from the docs, I don’t think there’s much more to it! :sweat: