Netlify does not recognize form in nuxt app

Question

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.

Answer 1

Netlify带有内置的表单处理功能。我们的构建机器人通过在部署时直接解析HTML文件来实现此目的，因此您无需在站点上进行API调用或包含额外的JavaScript。

要求表单在部署时位于呈现的文件中。SPA模式的问题是您的所有页面实际上都不呈现为HTML。您可以通过右键单击页面，然后单击“查看页面源代码”来进行检查。您将无法找到表格。

Netlify解决了这个问题在这里他们的文档。

他们在此处专门针对Vue应用修复了此问题

在这个问题上再深入一点，我们在这里找到了Nuxt解决方案：

将以下内容放在static/form-dummy/index.html：

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

将以下内容放入pages/form/index.vue（或在命名Vue文件时）

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

从帖子：

您只需要确保将其添加到Vue组件中即可，这样Netlify便可以将表单提交识别为与名为MYFORM的表单相关联。我认为您还需要确保要接收数据的所有输入都在两种形式上。