2

When I navigate to a form using vue-router by adding a link with a <router-link> element, the form does not work. When I hit submit I get a 404 response.

However, if I navigate to it using an <a> tag (triggering a page reload) then it works perfectly.

I suspect that this has to do with the page rendering as a SPA and for some reason not loading an important part of the form for Netlify unless the form page is reloaded? Why is this happening and is there an elegant solution to the problem? I could just replace all links to forms with tags but I'm sure that there is a better solution, I just don't understand the problem well enough to find it.

For context, I am using Nuxt. The forms are recognized by Netlify on the backend and can accept submission with the tag link so that is not the problem.

kissu
  • 24,311
  • 11
  • 36
  • 67
John
  • 49
  • 8

1 Answers1

3

Since you're using Nuxt, you probably should go full static (hostable on Netlify-like platforms) or with target: server (hostable on Heroku-like platforms) but at any point, you should have ssr: true (default value). When you do have this, the biggest part is done.

In Nuxt, you should use <nuxt-link> rather than <router-link>, it works exactly the same (takes the same params etc) but it's more specific to Nuxt and SSR compatible while <router-link> is not. More details here: https://nuxtjs.org/docs/2.x/features/nuxt-components#the-nuxtlink-component

So, with all of this it should already work great. If it's not, I will gladly help you spot the issue if you have a github repo.

An alternative solution can be to use some form without any SSR dependency like Formspree: https://formspree.io/ (works fine with any SPA)

It works great, really simple. But I'd rather invite you to make a proper SSR form since you're using Nuxt.

PS: use <a> tags only for external links aka the ones which do not start with your domain name, nothing else. A follow of this kind of link is like a hard refresh and should be avoided at all costs.

EDIT: how to deploy by cleaning the cache. enter image description here

EDIT on how to achieve a working form:

<template>
  <div>
    <form
      netlify
      action="/"
      method="POST"
      name="Contact"
    >
      <input type="hidden" name="form-name" value="Contact" />
      <!-- ... -->
    </form>
  </div>
</template>

As told in the docs:

[...] inject a hidden input named form-name [...] and the hidden form-name input’s value matches the name attribute of form

Working fine. Could add a honeypot to it to make it even more secure! enter image description here

kissu
  • 24,311
  • 11
  • 36
  • 67
  • Thank you so much for your answer! Unfortunately, it is already set to target:static and sr:true already. I was originally using as well but it was not working either. This is really confusing to me since I have used forms with Netlify on other Nuxt projects that have worked. I am unable to share the repo since it is private, but is there anything else that I should check or code that I should share? Thank you again! – John May 11 '21 at 19:05
  • 1
    Hm, I didn't add a netlify form on Nuxt recently, will probably do in the next future hours/days. But you can check that your form is actually properly generated by the backend (disable the JS for this). Check that there is no build cache issues (had once with Netlify, image added to my answer). Double-check that you do have a `data-netlify="true"` on your form and maybe also add a honeypot field: https://docs.netlify.com/forms/spam-filters/#honeypot-field If it's still not working, I can guess that you can create a new project and try to spot every small difference. A minor typo or alike IMO. – kissu May 12 '21 at 02:05
  • Hello again! I've been driving myself crazy trying to figure this out with no luck. As you suggested, I tried to make a new project to spot the differences but even that project is not working now. Is there any chance you might be able to look at this test repository and let me know if you see anything broken? It must be so obvious and I've just been staring for too long. https://github.com/John-Church/test – John May 14 '21 at 03:47
  • Thank you again for your help. Adding the hidden field fixed it for me. What confuses me, though, is that it appears I've accidentally left out the hidden field on other sites and the forms have still worked? Also, why would they work without the hidden field when a page refresh is triggered? – John May 14 '21 at 08:26