Netlify 表单提交是空白的 [英] Netlify form submissions are blank

问题描述

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

解决方案

免责声明:我为 Netlify 工作.

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

首先，了解我们的服务需要您的表单的纯 html 版本、带有 name 参数以及 netlify 或 data-netlify=true 参数；这是让您的网站完全接受表单提交的准备，所以您已经正确设置了；如果没有，则在发布时会收到 404.

一旦您在部署中安装了它并且我们正确解析了它，您就会在表单"选项卡上的站点设置仪表板中看到表单名称.请注意，我们还会从该文件中提取所有将保存并在通知或仪表板中显示给您的字段名称，并且仅从该文件中提取，因此请确保为每个表单字段都指定一个 name, 在那个 html 文件中.

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

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

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

When I submit my Netlify form the server responds with a 200 status and I get the 'thank you' response page. However, when I check the form submission in the Netlify admin, they are all blank. I've inspected my xhr requests and the data shows in the 'params' section of the browser dev tools.

解决方案

Disclaimer: I work for Netlify.

When our service stores blank submissions, it has not received any fields from the submission which were defined in the html version of the form with the same name parameter in its definition as the submission.

To start off with, it's useful to know that our service requires a plain html version of your form, with a name parameter as well as the netlify or data-netlify=true parameter; this is what prepares your site to accept form submissions at all, so you had that set up right already; if you didn't, you'd get a 404 when POSTing.

Once you have this in a deploy and we parse it correctly, you'll see the form name in your site settings dashboard on the 'Forms' tab. Note that we ALSO pull all the field names we'll save and show to you in notifications or the dashboard from this file and only this file, so make sure you give each form field all a name as well, in that html file.

If you see the form in your dashboard, yet get a blank submission when you are sure data was POSTed, this probably has one of three causes:

1. Netlify did not correctly process your field names from the html version of your form. The service will only properly handle the fields which we see in that html version at deploy time.
2. Netlify does matching by field name at submission time, so make sure that what your site sends to us then matches up between with your deployed html copy of the form. This happens automatically for pure html (no JS) forms since you are POSTing from the file which is the canonical "definition" of your form fields; however for javascript forms you need to take care that the names match up. Put another way, you cannot later add new fields dynamically in javascript and send them (Netlify will accept all fields, as you have seen; but will not store them or notify you about ones that were not processed at deploy time!)
3. One more quirk that could get in the way: having multiple copies of a form with the same name in your deploy. Only one will be processed, so if you happen to have an errant <form name=test netlify></form> in another html file (or even the same one!) - it could be the one that we process rather than the other form also named test. So, make sure that you only send a single html definition of your form. Note that some frameworks like gatsby render your jsx down into html before deploy, meaning that if you have a plain html file form definition in your deploy - it could be processed instead of the copy gatsby built.

This blog post describes a successful form built in a react app: https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/

这篇关于Netlify 表单提交是空白的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！