# Netlify forms not showing proper field names in submission

**URL:** <https://answers.netlify.com/t/netlify-forms-not-showing-proper-field-names-in-submission/92671>\
**Category:** Support\
**Tags:** netlify-forms\
**Created:** [May 19, 2023, 5:27am UTC](https://answers.netlify.com/t/netlify-forms-not-showing-proper-field-names-in-submission/92671 "2023-05-19T05:27:12Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![soul-wisdom](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/soul-wisdom/32/50979_2.png) [@soul-wisdom](https://answers.netlify.com/u/soul-wisdom)\
**Post date:** [May 19, 2023, 5:27am UTC](https://answers.netlify.com/t/netlify-forms-not-showing-proper-field-names-in-submission/92671/1 "2023-05-19T05:27:12Z")

</div>

**Code for netlify form:**

```auto
<Stack
        gap={3}
        component='form'
        textTransform='capitalize'

        name='contact'
        method='POST'
        data-netlify='true'>
        <input name='form-name' type='hidden' value='contact' readOnly />

        <Input name='fullName' variant='outlined' label='full name' required />

        <Input name='email' type='email' variant='outlined' label='email address' required />

        <Input name='issue' label='pick your area of issue' defaultValue='' select>
          <MenuItem value={0}>issue type A</MenuItem>
          <MenuItem value={1}>issue type B</MenuItem>
          <MenuItem value={2}>issue type C</MenuItem>
        </Input>

        <Button variant='primary' type='submit'>
          submit
        </Button>
      </Stack>

```

**Problem:**

 ![netlify forms](https://global.discourse-cdn.com/netlify/original/3X/8/5/8534816559587ef73737fa8174f201ad892ddb48.png)

---

<div class="post-metadata">

**Author:** ![jasiqli](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/jasiqli/32/38220_2.png) [@jasiqli](https://answers.netlify.com/u/jasiqli)\
**Post date:** [May 19, 2023, 5:36am UTC](https://answers.netlify.com/t/netlify-forms-not-showing-proper-field-names-in-submission/92671/2 "2023-05-19T05:36:16Z")

</div>

Can you share the URL for the form?

The code you have shared it what the form is built from, not what the form it built to.

---

<div class="post-metadata">

**Author:** ![soul-wisdom](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/soul-wisdom/32/50979_2.png) [@soul-wisdom](https://answers.netlify.com/u/soul-wisdom)\
**Post date:** [May 20, 2023, 3:01am UTC](https://answers.netlify.com/t/netlify-forms-not-showing-proper-field-names-in-submission/92671/3 "2023-05-20T03:01:14Z")

</div>

[https://soulwisdom.netlify.app/contact/](https://soulwisdom.netlify.app/contact/)

---

<div class="post-metadata">

**Author:** ![jasiqli](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/jasiqli/32/38220_2.png) [@jasiqli](https://answers.netlify.com/u/jasiqli)\
**Post date:** [May 20, 2023, 3:20am UTC](https://answers.netlify.com/t/netlify-forms-not-showing-proper-field-names-in-submission/92671/4 "2023-05-20T03:20:50Z")

</div>

Thanks @soul-wisdom

Loading the page I see

```html
<input
  aria-invalid="false"
  id=":Rilal9:"
  name="fullname"
  required=""
  type="text"
  class="MuiInputBase-input MuiOutlinedInput-input css-1x5jdmq"
  value=""
>

```

This all looks in order _(though I’m not sure the `id` is given the occurrence of `:` in the string.)_

Well, according to [`id` on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)

> Technically, the value for an `id` attribute may contain any character, except [whitespace](https://developer.mozilla.org/en-US/docs/Glossary/Whitespace) characters.

So yes, is valid, but it continues

> However, to avoid inadvertent errors, only [ASCII](https://developer.mozilla.org/en-US/docs/Glossary/ASCII) letters, digits, `'_'`, and `'-'` should be used, and the value for an `id` attribute should start with a letter.

So best not to use the `:`. _(Though is this something Gatsby has probably done automatically without your input.)_

But I digress.

So the input looks okay. My guess is that Gatsby is handling the form submission and modifying something _(or, quite likely based on the `Mui-error` in the field name something is going wrong)_ which is then causing the name to come through wrong.

However, as I am far from proficient in Gatsby, the specifics of this I could not go into.

---

<div class="post-metadata">

**Author:** ![soul-wisdom](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/soul-wisdom/32/50979_2.png) [@soul-wisdom](https://answers.netlify.com/u/soul-wisdom)\
**Post date:** [May 21, 2023, 3:59am UTC](https://answers.netlify.com/t/netlify-forms-not-showing-proper-field-names-in-submission/92671/5 "2023-05-21T03:59:07Z")

</div>

Thanks for your help.

But if you see the generated HTML for other inputs, they too have a similar structure.

```auto
<input aria-invalid="false" id=":r2:" name="email" required="" type="email" class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input" value="">

```

However, the names of these inputs appear correctly on Netlify forms. So I’m still not sure what actually is causing this problem.

Is there any chance you can dig into what logic Netlify uses to parse these field names on the form submissions?

---

<div class="post-metadata">

**Author:** ![jasiqli](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/jasiqli/32/38220_2.png) [@jasiqli](https://answers.netlify.com/u/jasiqli)\
**Post date:** [May 21, 2023, 4:07am UTC](https://answers.netlify.com/t/netlify-forms-not-showing-proper-field-names-in-submission/92671/6 "2023-05-21T04:07:50Z")

</div>

> [@soul-wisdom](#):
>
> Is there any chance you can dig into what logic Netlify uses to parse these field names on the form submissions?

Given I don’t work for Netlify, no chance.

---

<div class="post-metadata">

**Author:** ![soul-wisdom](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/soul-wisdom/32/50979_2.png) [@soul-wisdom](https://answers.netlify.com/u/soul-wisdom)\
**Post date:** [May 21, 2023, 4:11am UTC](https://answers.netlify.com/t/netlify-forms-not-showing-proper-field-names-in-submission/92671/7 "2023-05-21T04:11:36Z")

</div>

Oh okay.

Regarding your point:

> [@jasiqli](#):
>
> My guess is that Gatsby is handling the form submission and modifying something _(or, quite likely based on the `Mui-error` in the field name something is going wrong)_ which is then causing the name to come through wrong.

 ![image](https://global.discourse-cdn.com/netlify/original/3X/7/6/7647ca9d07f9e013773460ed73f235ca670ddabb.png)

We can see in the network tab that the correct field names are being sent.

---

<div class="post-metadata">

**Author:** ![jasiqli](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/jasiqli/32/38220_2.png) [@jasiqli](https://answers.netlify.com/u/jasiqli)\
**Post date:** [May 21, 2023, 4:22am UTC](https://answers.netlify.com/t/netlify-forms-not-showing-proper-field-names-in-submission/92671/8 "2023-05-21T04:22:34Z")

</div>

Can you see a new form submission with the following details?

```plaintext
fullname = Test123
email = t@st.er
issue = 0

```

Do the field names and values look correct?

---

<div class="post-metadata">

**Author:** ![soul-wisdom](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/soul-wisdom/32/50979_2.png) [@soul-wisdom](https://answers.netlify.com/u/soul-wisdom)\
**Post date:** [May 22, 2023, 2:49am UTC](https://answers.netlify.com/t/netlify-forms-not-showing-proper-field-names-in-submission/92671/9 "2023-05-22T02:49:41Z")

</div>

No, they’re still the same.

 ![image](https://global.discourse-cdn.com/netlify/original/3X/c/9/c9b05ad208b325fee81714ec872bc5a9cee78e00.png)

---

<div class="post-metadata">

**Author:** ![jasiqli](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/jasiqli/32/38220_2.png) [@jasiqli](https://answers.netlify.com/u/jasiqli)\
**Post date:** [May 22, 2023, 5:31am UTC](https://answers.netlify.com/t/netlify-forms-not-showing-proper-field-names-in-submission/92671/10 "2023-05-22T05:31:13Z")

</div>

Can you share the repository you are deploying from?