Netlify 表单提交为空白

Question

当我提交我的 Netlify 表单时，服务器响应 200 状态，我得到 'thank you' 响应页面。但是，当我在 Netlify 管理员中检查表单提交时，它们都是空白的。我检查了我的 xhr 请求，数据显示在浏览器开发工具的 'params' 部分。

Answer 1

免责声明：我为 Netlify 工作。

当我们的服务存储空白提交时，它没有从提交中收到任何字段，这些字段是在 html 版本的表单中定义的，在其定义中具有与提交相同的 name 参数.

首先，了解我们的服务需要您的表单的普通 html 版本，带有 name 参数以及 netlify 或 data-netlify=true参数；这就是让您的网站准备好接受表单提交的原因，所以您已经设置好了；如果不这样做，您将在发布时收到 404。

一旦您在部署中拥有它并且我们正确解析它，您将在 'Forms' 选项卡上的站点设置仪表板中看到表单名称。请注意，我们还从该文件中提取所有我们将保存并在通知或仪表板中显示给您的字段名称，并且仅从该文件中提取，因此请确保您也为每个表单字段提供一个 name，在那个html 文件。

如果您在仪表板中看到该表单，但在确定数据已发布时收到空白提交，这可能是以下三个原因之一：

Netlify 没有正确处理 html 版本表单中的字段名称。该服务只会正确处理我们在 html 版本 部署时 中看到的字段。
Netlify 在提交时按字段名称进行匹配，因此请确保您的站点发送给我们的内容与您部署的 html形式。对于纯 html（无 JS）表单，这会自动发生，因为您是从文件中发布的，该文件是表单字段的规范 "definition"；但是对于 javascript 表单，您需要注意名称是否匹配。换句话说，您以后不能在 javascript 中动态添加新字段并发送它们（Netlify 将接受所有字段，如您所见；但不会存储它们或通知您有关部署时未处理的字段！ )
还有一个可能会妨碍您的怪癖：在您的部署中具有同名表单的多个副本。只有一个会被处理，所以如果你碰巧在另一个 html 文件（甚至是同一个文件！）中有一个错误的 <form name=test netlify></form> - 它可能是我们处理的那个而不是另一种形式命名测试。因此，请确保您只发送一个 html 表单定义。请注意，像 gatsby 这样的一些框架在部署之前将您的 jsx 渲染为 html，这意味着如果您在部署中有一个普通的 html 文件表单定义 - 它可以被处理而不是复制 gatsby 构建。

此博客 post 描述了在 React 应用程序中构建的成功表单：https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/

Answer 2

我在 input 字段中遗漏了 "name" 属性。
表单中的每个输入都必须有一个 "name" 属性。 <input name="email" ...> 或 <textarea name="message" ...> 之类的东西就是您所需要的。

Answer 3

不要错过父层和子层的“名称”属性

<form name="contact" method="POST" data-netlify="true">
  <input type="text" placeholder="name" class="box" name="name">
  <input type="email" placeholder="email" class="box" name="email">
  <input type="text" placeholder="project" class="box" name="project">
  <textarea name="message" id="" cols="30" rows="10" class="box message" placeholder="message"></textarea>
  <div class="field">
    <div data-netlify-recaptcha="true"></div>
  </div>
  <button type="submit" class="btn"> send <i class="fas fa-paper-plane"></i> </button>
</form>

Netlify 表单提交为空白

Netlify form submissions are blank

netlify