Question

因此，我有一个要在Netlify上托管的网站。我遵循了他们在其站点上（有关表单）的文档，并且表单名称在部署后显示在我的Netlify破折号上，但是没有任何提交提交。

请问对此有什么帮助吗？

这是我的Contact.js组件中的表单：

<form
  name="contact-me"
  method="post"
  action="/success"
  data-netlify="true"
  data-netlify-honeypot="bot-field"
>
  <input type="hidden" name="bot-field" />
  <label htmlFor="name">
    Name: <input type="text" name="name" id="name" required />
  </label>
  <label htmlFor="email">
    Email: <input type="email" name="email" id="email" required />
  </label>
  <label htmlFor="message">
    Message: <textarea name="message" id="message" required />
  </label>
  <footer className="major">
    <ul className="actions">
      <li>
        <button type="submit" className="button small special">
          Send
        </button>
      </li>
      <li>
        {/* eslint-disable-next-line */}
                    <button type="reset" className="button small">
          Clear
        </button>
      </li>
    </ul>
  </footer>
</form>

当然，我正在使用Gatsby构建网站。

请让我知道是否应将链接放在我的仓库中。

谢谢

Answer 1

使用Gatsby网站测试netlify最快的方法：

在您的网站的浏览器中禁用JavaScript
不使用javascript进入联系页面
查看页面来源（netlify用于注册表单的页面）
查看表单，并确保Netlify requires
需要data-netlify="true"形式

<form name="contact" method="POST" data-netlify="true">
  <p>
    <label>Email: <input type="text" name="name" /></label>
  </p>
  <p>
    <label>Message: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type=”submit”>Send</button>
  </p>
</form>

如果设置正确，您的表格应在SPA中正确处理并正确注册输入字段。

Answer 2

我有类似的问题。解决方案是确保在gatsby-config.js中的清单后加载我的网络工作者：

{
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        ...
      }
    },
    'gatsby-plugin-offline'
  ]
}

来源：https://www.gatsbyjs.org/docs/add-offline-support-with-a-service-worker/

此软件包还有助于构建表单：https://www.npmjs.com/package/react-netlify-form

GatsbyJS + Netlify表单未收到任何提交

2 个答案: