Netlify hides the email field

Question

I recently created a Netlify application, with Gatsby JS and a Netlify form. I have the following as my form field:

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

In development, the email field shows as planned. But in production, specifically on the netlify system, only the name and the message field shows.

Form submission works fine in production by the way, showing only the "name" and the "message" inside the Netlify dashboard.

Could there be a reason why this is happening?

Answer 1

The first 2 of your inputs have the same name:

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

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

Netlify may rely on the field name to differ between different inputs. Would you try fixing that and see if the problem still occurs?