Как получить многошаговую форму, работающую на Netlify с Gatsby - PullRequest
Новая
       54

Как получить многошаговую форму, работающую на Netlify с Gatsby

1 голос
/ 21 октября 2019

Я пытаюсь получить многошаговую форму, используя Гэтсби, используя функцию 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>

Буду признателен за любую помощь.

1 Ответ

0 голосов
/ 22 октября 2019

Оказывается, мне не хватало этой строки. Добавление его исправило все. 

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