Form fields with the same label are being overwritten on email notifications

  • Site: contigoerp

Context
I have a form with some fields with the same label. It submits well and Netlify UI shows all the fields even the repeated ones. The problem is that in the email notification it’s not sending all the fields, the ones that are repeated are beign overwritten:


Left side is netlify UI and right side is email notification.

I tried to fix it changing to a stateful react form, but even when I’m sending an object with different properties it is still taking the label values as propertie names so in the email notification it keeps overwritting.

CODE
function ReferredForm() {
const [formData, setFormData] = useState({})

  const handleChange = ({ target }) => {
    setFormData({ ...formData, [target.name]: target.value })
  }

  const encode = data => {
    return Object.keys(data)
      .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
      .join("&")
  }
  const handleSubmit = e => {
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contigoerp-referido", ...formData }),
    })
      .then(() => navigate("/gracias"))
      .catch(error => alert(error))

    e.preventDefault()
  }

  const referrerData = (
    <>
      <label htmlFor="referrerName">
        Nombre completo *
        <input
          id="referrerName"
          name="referrerName"
          type="text"
          aria-label="referrerName"
          placeholder="Nombre"
          value={formData.referrerName || ""}
          onChange={e => handleChange(e)}
          required
        />
      </label>
      <label htmlFor="referrerId">
        Cédula *
        <input
          id="referrerId"
          name="referrerId"
          type="number"
          aria-label="referrerId"
          placeholder="Cédula"
          value={formData.referrerId || ""}
          onChange={e => handleChange(e)}
          required
        />
      </label>
      <label htmlFor="referrerPhone">
        Celular *
        <input
          id="referrerPhone"
          name="referrerPhone"
          type="tel"
          aria-label="referrerPhone"
          placeholder="Celular"
          pattern="[0-9]{7,10}"
          value={formData.referrerPhone || ""}
          onChange={e => handleChange(e)}
          required
        />
      </label>
      <label htmlFor="referrerEmail">
        Correo electrónico *
        <input
          id="referrerEmail"
          name="referrerEmail"
          type="email"
          aria-label="referrerEmail"
          placeholder="Correo electrónico"
          value={formData.referrerEmail || ""}
          onChange={e => handleChange(e)}
          required
        />
      </label>
      <label htmlFor="referrerAccount">
        Nro de cuenta
        <input
          id="referrerAccount"
          name="referrerAccount"
          type="number"
          aria-label="referrerAccount"
          placeholder="Nro de cuenta"
          value={formData.referrerAccount || ""}
          onChange={e => handleChange(e)}
        />
      </label>
      <label htmlFor="referrerAccountType">
        Tipo de cuenta
        <input
          id="referrerAccountType"
          name="referrerAccountType"
          type="text"
          aria-label="referrerAccountType"
          placeholder="Ahorros | Corriente"
          value={formData.referrerAccountType || ""}
          onChange={e => handleChange(e)}
        />
      </label>
      <label htmlFor="referrerBank">
        Banco
        <input
          id="referrerBank"
          name="referrerBank"
          type="text"
          aria-label="referrerBank"
          placeholder="Banco"
          value={formData.referrerBank || ""}
          onChange={e => handleChange(e)}
        />
      </label>
      <label htmlFor="referrerPosition">
        Ocupación
        <input
          id="referrerPosition"
          name="referrerPosition"
          type="text"
          aria-label="referrerPosition"
          placeholder="Ocupación"
          value={formData.referrerPosition || ""}
          onChange={e => handleChange(e)}
        />
      </label>
    </>
  )

  const referredData = (
    <>
      <label htmlFor="referredName">
        Nombre completo *
        <input
          id="referredName"
          name="referredName"
          type="text"
          aria-label="referredName"
          placeholder="Nombre"
          value={formData.referredName || ""}
          onChange={e => handleChange(e)}
          required
        />
      </label>
      <label htmlFor="referredPhone">
        Celular *
        <input
          id="referredPhone"
          name="referredPhone"
          type="tel"
          aria-label="referredPhone"
          placeholder="Celular"
          pattern="[0-9]{7,10}"
          value={formData.referredPhone || ""}
          onChange={e => handleChange(e)}
          required
        />
      </label>
      <label htmlFor="referredEmail">
        Correo electrónico *
        <input
          id="referredEmail"
          name="referredEmail"
          type="email"
          aria-label="referredEmail"
          placeholder="Correo electrónico"
          value={formData.referredEmail || ""}
          onChange={e => handleChange(e)}
          required
        />
      </label>

      <label htmlFor="referredCompanyName">
        Nombre de la empresa
        <input
          id="referredCompanyName"
          name="referredCompanyName"
          type="text"
          aria-label="referredCompanyName"
          placeholder="Empresa"
          value={formData.referredCompanyName || ""}
          onChange={e => handleChange(e)}
        />
      </label>
    </>
  )

  return (
    <Form id="referido" onSubmit={handleSubmit}>
      <input type="hidden" aria-label="antispam" name="bot-field" />
      <input
        type="hidden"
        aria-label="form-name"
        name="contigoerp-referido"
        value="Referido"
      />
      <h1 style={{ marginTop: "1em" }}>
        Refiere a alguien que esté interesado en ContigoERP
      </h1>
      <fieldset style={{ marginBottom: "3em" }}>
        <h2>Datos del referente</h2>
        <section className="fields">{referrerData}</section>
      </fieldset>
      <fieldset>
        <h2>Datos del referido</h2>
        <section className="fields">{referredData}</section>
      </fieldset>
      <section className="actions">
        <Button type="submit" mb="0">
          Enviar
        </Button>
      </section>
    </Form>
  )
}

Thanks in advance for your help.

Hi @jmedina2930,

This is a known issue and I’ve added this post to the issue tracking it. We’ll update once we have a fix out for it. Thank you for reporting the issue.