0

I am trying to integrate Netlify form in the footer of Nuxt 3 SPA website and Netlify deploy is not picking it up on build. Wondering if it's possible to add a hidden form (like on Nuxt 2) as static html?

my form:

<form 
  id="subscribe"
  name="subscribe" 
  method="post" 
  netlify 
  netlify-honeypot="bot-field" 
  data-netlify="true" 
  @submit.prevent="onFormSubmit"
>
  <input type="hidden" name="form-name" value="subscribe">
  <input type="email" name="email" required>
  <button>Submit</button>
</form>

JS handler:

const onFormSubmit = (e) => {
  let myForm = document.getElementById("subscribe");
  let formData = new FormData(myForm);
  fetch("/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(formData).toString(),
  })
  .then(result => showThanks.value = true)
  .catch((error) => console.log(error));
}

I use JS to send the form and I get 200 OK response, but if I go to Forms page in Netlify - it's empty.

kissu
  • 40,416
  • 14
  • 65
  • 133
Tadas Majeris
  • 361
  • 2
  • 4
  • 12
  • If you're not using SPA-only, you can simply add it to any `.vue` file in a `pages` directory. It will then be rendered/generated on the server (isomorphic). Nothing really different from Nuxt2 so far. – kissu Sep 06 '22 at 21:03
  • Also, I don't really see the point of adding it upper in the chain. Add it to the page with the form, no need to have it on every one of them. – kissu Sep 06 '22 at 21:04
  • 1
    hey @kissu , would be great if that was enough. but its not working. i get 200 OK response from the form, but its not registered in Netlify backend. also the form is in the footer, so its on all pages – Tadas Majeris Sep 07 '22 at 08:34
  • Maybe clean the cache + double check that you're properly using SSG for your app. If the form is in the footer, it can totally stay in the default layout (no need to reach up the tree). – kissu Sep 07 '22 at 09:06
  • @kissu cache is clean. I am trying to have it client side only. if i cant figure out will try to use SSG, but nuxi generate fails currently – Tadas Majeris Sep 07 '22 at 09:49
  • 1
    You can't have a Netlify form with client-side only, you need it to be static. If you want something working only on client-side, you can use service likes Formspree as explained here: https://stackoverflow.com/a/67479098/8816585 – kissu Sep 07 '22 at 09:55
  • therefore my question how to add hidden form to html like you could on Nuxt 2 :) anyway, thanks for suggestion! – Tadas Majeris Sep 07 '22 at 10:10
  • I mean, there is no difference in Nuxt3 coming from Nuxt2. Take your default layout, drop a `my-footer` component there. Inside of it, add the needed markup for the hidden Netlify form, use SSG, deploy and enjoy. If you want to only use an SPA, use Formspreee. Not sure what is missing here from my comments + answer above. – kissu Sep 07 '22 at 10:14
  • actually seems it should work with JS rendered forms: https://docs.netlify.com/forms/setup/#work-with-javascript-rendered-forms I got it exactly as you say in default layout
    component.     – Tadas Majeris Sep 07 '22 at 10:19
  • JS-rendered forms in that case are still pre-rendered on the server (as seen in the Vue tutorial). Also, why don't you want to use SSG with Nuxt for some static forms? It's the whole point of the framework. IMO, you can't use the Netlify form on an SPA-only without the use of AJAX. – kissu Sep 07 '22 at 10:31
  • Don't use querySelector but rather template refs. Also, prefer the `async/await` syntax. Also, where do you call this function exactly? What do you see in your network tab? – kissu Sep 07 '22 at 10:37
  • the form itself works (i think): Response {type: 'basic', url: 'https://www.themojoclinic.com/', redirected: false, status: 200, ok: true, …} its just not found by Netlify. – Tadas Majeris Sep 07 '22 at 10:44

1 Answers1

0

wasn't able to set it up with nuxt build, so ended up using SSG nuxt generate

Tadas Majeris
  • 361
  • 2
  • 4
  • 12
  • `build` is for SSR, Netlify does not support regular SSR so legit yeah. Also, for a classic SPA-only, you should go SSG anyway, no point into SSR. – kissu Sep 07 '22 at 13:04