CODEWITHSUNDEEP
formsvue.jsnuxt.jsnetlify
OfficialLolodrom
OfficialLolodrom

Reputation: 37

Netlify does not recognize form in nuxt app

We implemented a simple nuxt app with a basic form and deployed it to netlify. When pressing the "Submit" Button of the Form, we receive a 404.

Here you can find the link to the deployed netlify app:
EDIT -> Removed Link

After looking through the troubleshoot guide, they listed that the added "netlify" or "data-netlify="true" attributes should not be visible if netlify recognized your form, but they are.

Plus the form can't be found in the "form" configuration tab of the netlify backend.

Nuxt config:
SPA
Tailwind

We tried to add the necessary attributes for netlify: netlify or data-netlify="true" & netlify-honeypot="bot-field"

We also added a "pre-render" library called prerender-spa-plugin.

Here you can find the contact.vue page content. Simple form with "name" attributes set according to netlify documentation.

<template>
  <div>
    <form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
      <p class="hidden">
        <label
          >Don’t fill this out if you're human: <input name="bot-field"
        /></label>
      </p>
      <p>
        <label
          >Name
          <input
            type="text"
            name="name"
            class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white;"
        /></label>
      </p>
      <p>
        <label
          >Email
          <input
            type="email"
            name="email"
            class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white;"
        /></label>
      </p>
      <p>
        <button
          type="submit"
          name="submit"
          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
        >
          Send
        </button>
      </p>
    </form>
  </div>
</template>

<script>
export default {};
</script>

<style>
.hidden {
  display: none;
}
</style>

It would be great if we can manage to fix this, so that netlify finally recognizes our form.

Upvotes: 0

Views: 1437

Answers (2)

Cesar Sanchez
Cesar Sanchez

Reputation: 71

Just to complement @hmilbradt answer, the action path of your dynamic form should match the path to the static form. If the path to your static form is /form/contact.html then the action or path in your dynamic form should be /form/contact.html too. I spent a lot of time trying to fix this problem. In my case I send an AJAX request:

await fetch('/forms/contact.html', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams(formData).toString(),
    });

Upvotes: 0

HMilbradt
HMilbradt

Reputation: 4639

Netlify comes with built-in form handling. Our build bots do it by parsing your HTML files directly at deploy time, so there’s no need for you to make an API call or include extra JavaScript on your site.

The form is required to be in the rendered files at deploy time. The problem with SPA mode is that none of your pages are actually rendered as HTML. You can check this by right clicking the page, and clicking "View Page Source". You won't be able to find the form.

Netlify addresses this problem here in their docs.

They have a specific post for fixing this for a Vue app here

A little more digging on the the issue and we find a Nuxt solution here:

Place the following in static/form-dummy/index.html:

<form name="MYFORM" action="/form/success" netlify>
  <!-- form controls here -->
</form>

Place the following in pages/form/index.vue (Or whenever you've named your Vue file)

<form name="MYFORM" action="/form/success" method="post">
  <input type="hidden" name="form-name" value="MYFORM" />
  <!-- form controls here -->
</form>

From the post:

You just need to make sure you add that hidden in the Vue component so that Netlify recognises the form submission as associated with the form called MYFORM. I think you also need to ensure all the inputs you want to receive data for are on both forms.

Upvotes: 8

Related Questions