javascript - 如何使用 Gatsby 在 Netlify 上获取多步骤表单

Question

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

出于某种原因，有时隐藏表单会以 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>

如有任何帮助，我们将不胜感激。

Answer 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>