问题标签 [netlify-form]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
153 浏览

javascript - Netlify 表单在提交时获取 GET 而不是 POST 请求

我有一个基本的 Netlify 表单(基于本指南),其中包含nameemail字段message。使用以下提交功能:

非常简单,除了验证之外,我创建了一个data对象并用一对 data[input.name] = input.value. 一切都按预期在本地工作,以及在developbuild模式下。我可以看到一个POST请求,但是,在生产中,它变成了GET

在生产中获取请求

我已经尝试将内置更改为fetchaxios但结果是一样的。我不知道是否需要在我的服务器中添加一些自定义配置或如何绕过它。

我生成的 HTML 结构是:

我已经阅读了很多类似的问题、文章和指南,但没有任何帮助。

0 投票
1 回答
790 浏览

reactjs - Netlify-forms 联系表单提交 404 错误

我无法通过使用 Netlify-Forms 提交我的联系页面,我收到 404 错误。

我有以下表格: -

当我提交它时,我首先收到一个 404 错误,然后按预期获得我的感谢页面。

难道我做错了什么?我可以在表单部分看到我的“Portfolio_Contact”。

感谢您的帮助和时间。

0 投票
1 回答
333 浏览

reactjs - Netlify 表单不适用于我的 GatsbyJS 网站

我正在开发一个网站并使用 Netlify 来托管它。我已将 Netlify 表单添加到 contact.js 文件中的联系我们表单中,并且表单名称在 Netlify 表单仪表板中显示良好。虽然,当我提交表单时,什么也没有发生。Netlify 上没有任何已批准或垃圾邮件的提交。

这是我的contact.js 源代码。

0 投票
1 回答
414 浏览

javascript - 如何为表单提交按钮创建一个“onClick”事件,该按钮将数据发布到 Netlify 并重定向到 Stripe Checkout?

我的站点代码位于@ https://github.com/CB-Essential-Services/adorable-chestnut/blob/staging-3/src/components/checkout.js

我正在运行一个 Netlify -- Gatsby -- StripeCheckout 堆栈。

问题:我需要submit下面代码中的按钮来将表单数据提交到 Netlify Forms 并使用“ onClick ”事件redirectToCheckout来处理 Stripe 的付款。

redirectToCheckout部分工作正常。Stripe 开发人员支持说我应该能够将表单数据提交给 Netlify --> initial convo w/Stripe secondary convo w/Stripe

总之,Stripe 开发支持说是的,我可以redirectToCheckout在前端的任何时候使用。例如,使用 AJAX 将表单数据提交给 Netlify,然后同时解析结果redirectToCheckout

这与我正在做的方法不同。我不知道如何利用 AJAX!

但他们也暗示这个过程是流动的。我的方法应该没问题。我只需要弄清楚如何将数据发布到 Netlify。

0 投票
0 回答
128 浏览

reactjs - Netlify 中的动态表单

我在 React 中有两个组件,在某种意义上它们都是形式。一个组件是某种父表单,它包含一个映射函数,该函数遍历一个children状态项以生成许多子子表单。这意味着使用表单的人可以单击按钮在父表单中的按钮下方添加 ChildSubForm 组件的新实例。

我目前的问题是我无法获得表格以在 Netlify 表格中接孩子。我有data-netlify="true"隐藏的输入,因此可以识别父表单,但是当我提交表单时,只会拾取父表单中的输入,如何更改我的设置或代码以允许 netlify 检测动态组件的值所以它们与其他数据一起发送?

如您所见,我还尝试将所有表单数据存储在状态项中并提交它们,但我仍然看不到这些值。是否与 Netlify 构建静态站点并事先检测所有表单值有关?

BookNow.js(父窗体)

ChildSubForm.js

更新:

所以我做了一些阅读,发现一篇文章想要做同样的事情,Netlify 的支持主管说除非你预先定义所有的表单字段(对于每个映射的组件),否则这是不可能的。有没有人找到解决方法?

Netlify 发布

0 投票
1 回答
306 浏览

reactjs - Gatsby Netlify 表单未收到提交的问题

我让 Netlify 表单工作并接受提交,但是一旦我开始根据https://docs.netlify.com/forms/setup/设置 AJAX ,我无法弄清楚为什么没有收到提交。

我尝试过的事情:

  1. 删除隐藏的“表单名称”输入
  2. 删除验证码
  3. 运行“干净的盖茨比”
  4. 删除打开的 Form 标签的方法属性(方法:“POST”)
  5. 从打开的 Form 标记中删除 action 属性并直接在 handleSubmit 中设置它:.then(() => navigate("/thank-you/"))

非常感谢任何建议或修复!

联系form.js:

盖茨比配置:

静态文件夹中的 HTML 文件:

0 投票
0 回答
47 浏览

php - Netlify 表单提交但在表单提交后显示“错误:--success msg--”

当我提交表单时,我会在邮箱中收到回复,但我看到类似..

错误:谢谢!我提交后。

这是我的代码:

这是我在提交表单后看到的输出。 表单提交后的输出

我不知道我是如何收到错误消息的:成功消息之前的单词

0 投票
1 回答
32 浏览

javascript - Netlify Forms Nuxt JS 错误 - POST https://festive-fermi-f2a8f1.netlify.app/ 404。未捕获(承诺)错误:请求失败,状态码 404

仅供参考,在部署时,表单与应用程序一起在 netlify 中创建,因此该表单应该对爬虫可见。然而,在测试部署的 nuxt 应用程序并提交表单后,我收到了上面提到的 404。

我已经尝试过增量更改,例如在 nuxt.config.js 中更改 ssr: true ,将 netlify 标记添加到开始元素等,但仍然没有运气。

任何帮助将不胜感激。

Contact.vue - 这是我的表单组件,包含所有 html 和方法

这是 Nuxt 的配置文件。nuxt.config.js

0 投票
1 回答
105 浏览

urlencode - 如何编码和解析/解码嵌套查询字符串Javascript

我通过提交创建的函数将表单数据从 React Hook Form 发送到 Netlify。我对单个表单字段值进行编码没有任何问题,但现在我正在尝试对对象数组进行编码。

这是我的表单数据的示例:

我唯一的问题是“天”数组。我尝试了各种方法来对此进行编码,这是我目前正在使用的功能(这并不理想):

我尝试使用像 qs 这样的库来对数据进行字符串化,但我不知道如何使它工作。

这是将数据发布到 Netlify 的函数:

最后,这是我提交创建的文件的示例,用于接收和解析编码数据:

那么,在将表单数据发送到 Netlify 之前,如何使用嵌套的对象数组正确编码表单数据?然后在 Netlify 函数中,我如何解析/解码该数据以便能够将其提交给 Sanity?

0 投票
0 回答
17 浏览

netlify - 我怎样才能让我的第二个表格出现在 netlify 上?

我一直在为网站制作一个新表单,但它没有显示在 netlify 表单上,并且在提交时我看到 404 错误。我不确定为什么会这样。我也有一个联系表格,但那个工作正常。我还记录了我的状态,并从所有字段中获取了要声明的所有值。

这些是与表单相关的代码。