Блог

Недавно я создал приложение Netlify с Gatsby JS и формой Netlify. В качестве поля формы у меня есть следующее:

 <form
    action="#"
    method="post"
    name="contact"
    className="footer-form"
    data-netlify="true">
    <input
        id="name"
        type="text"
        name="name"
        placeholder="Name"
        value={this.state.name}
        className="footer-form__input"
        onChange={e => this.setState({ name: e.target.value })}
    />

    <input
        id="email"
        name="name"
        type="email"
        className="footer-form__input"
        value={this.state.email}
        onChange={e => this.setState({ email: e.target.value })}
        placeholder="Email address"
    />

    <textarea
        id="message"
        name="message"
        className="footer-form__input footer-form__textarea"
        value={this.state.message}
        onChange={e => this.setState({ message: e.target.value })}
        placeholder="Your message"
    />

    <button type="submit" className="footer-form__button">
        Submit
    </button>
</form> 
  

В процессе разработки поле электронной почты отображается так, как планировалось. Но в рабочей среде, особенно в системе netlify, отображаются только имя и поле сообщения.

Кстати, отправка формы отлично работает в рабочей среде, отображая только «имя» и «сообщение» на панели управления Netlify.

Может ли быть причина, по которой это происходит?

Первые 2 ваших ввода имеют одинаковое имя:

     <input
        id="name"
        type="text"
        name="name"
        ...
    />

    <input
        id="email"
        name="name"
        type="email"
        ...
    />
  

Netlify может полагаться на то, что имя поля будет отличаться для разных входных данных. Не могли бы вы попробовать исправить это и посмотреть, все ли еще возникает проблема?