6

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

参数开发工具 在此处输入图像描述

4

3 回答 3

17

免责声明：我为 Netlify 工作。

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

首先，知道我们的服务需要一个纯 html 版本的表单是很有用的，它带有name参数以及netlifyordata-netlify=true参数；这就是让您的网站准备好接受表单提交的原因，因此您已经进行了正确的设置；如果你不这样做，你会在发布时得到 404。

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

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

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

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

于 2018-04-16T14:23:00.280 回答
4

我错过了字段中的"name"属性input。
表单中的每个输入都必须有一个“名称”属性。像<input name="email" ...>or<textarea name="message" ...>是你需要的东西。

于 2019-08-11T11:49:02.470 回答
0

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

<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>

于 2021-10-23T18:09:00.067 回答