如何使用 Gatsby 获得在 Netlify 上工作的多步骤表单答案

【问题标题】：How to get a multi-step form working on Netlify with Gatsby如何使用 Gatsby 获得在 Netlify 上工作的多步骤表单
【发布时间】：2019-10-22 19:17:00
【问题描述】：

我正在尝试使用 Gatsby 使用 Netlify 表单功能获取多步骤表单。我已将每个表单部分拆分为不同的组件，并在需要时对其进行迭代。同时更新页面上的隐藏表单。

由于某种原因，有时隐藏的表单会显示为 data-netlify="true" 而有时不会，我在 Netlify 中都没有收到任何表单提交。不过，表单是针对静态 html 构建的。

<form
  name="contact"
  method="POST"
  data-netlify="true"
  style={{ opacity: '0', width: '0', height: '0' }}>
  <input name="name" type="text" value={form.name} />
  <input name="phone" type="number" value={form.phone} />
  <input name="email" type="text" value={form.email} />
  <input name="additionalInfo" type="text" value={form.additionalInfo} />
  <button type="submit">Submit</button>
  <button style={{ marginLeft: '3%' }} type="button" onClick={() => 
  stepBack()}>Back</button>
</form>

任何帮助将不胜感激。

【问题讨论】：

标签： javascript gatsby netlify

【解决方案1】：

原来我错过了这一行。添加它可以解决所有问题。

<input type="hidden" name="form-name" value="Contact Us" />

所以表格现在看起来像这样。

<form
  name="contact"
  method="POST"
  data-netlify="true"
  style={{ opacity: '0', width: '0', height: '0' }}>
  <input type="hidden" name="form-name" value="contact" />
  <input name="name" type="text" value={form.name} />
  <input name="phone" type="number" value={form.phone} />
  <input name="email" type="text" value={form.email} />
  <input name="additionalInfo" type="text" value={form.additionalInfo} />
  <button type="submit">Submit</button>
  <button style={{ marginLeft: '3%' }} type="button" onClick={() => 
  stepBack()}>Back</button>
</form>

【讨论】：