如何在 Gatsby 上实现 Netlify 表单答案

【问题标题】：How to implement Netlify Forms on Gatsby如何在 Gatsby 上实现 Netlify 表单
【发布时间】：2020-03-23 04:31:31
【问题描述】：

我已经能够使用相同的方法在另一个站点上接收表单，但由于某种原因，我没有在这个站点上收到提交。 Netlify 仪表板说从 1 个表单（使用正确的名称）收集并且启用了蜜罐字段。

我做错了什么？

<form name='contact' method='POST' className='contactForm' data-netlify="true" data-netlify-honeypot="bot-field" action='/success' >
  <input type="hidden" name="bot-field" />
  <input type="hidden" name="form-name" value="inquiry" />
  <input id='f1' type='text' name='name' required placeholder="name*"/>
  <input id='f6' type='email' name='address' required placeholder="email address*"/>
  <textarea id='f5' id='message' name='message' required placeholder="message*"></textarea>
  <button id='f8' type='submit' className='submitForm' name='submit'>submit!</button>
</form>

【问题讨论】：

标签： gatsby netlify

【解决方案1】：

确保表单的name 属性和隐藏的form-name 字段的值相同。在您的示例中，该值应为 contact

<form name='contact' method='POST' className='contactForm' data-netlify="true" data-netlify-honeypot="bot-field" action='/success' >
  <input type="hidden" name="bot-field" />
  <input type="hidden" name="form-name" value="contact" />
  <input id='f1' type='text' name='name' required placeholder="name*"/>
  <input id='f6' type='email' name='address' required placeholder="email address*"/>
  <textarea id='f5' id='message' name='message' required placeholder="message*"></textarea>
  <button id='f8' type='submit' className='submitForm' name='submit'>submit!</button>
</form>

【讨论】：