Question

我正在尝试使用盖茨比使用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>

任何帮助将不胜感激。

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>

如何使用Gatsby在Netlify上使用多步骤表单

1 个答案: