Netlify forms not showing proper field names in submission

Support
1

Code for netlify form:

<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
netlify forms1759×715 32.4 KB

2

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.

3

https://soulwisdom.netlify.app/contact/

4

Thanks @soul-wisdom

Loading the page I see

<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

Technically, the value for an id attribute may contain any character, except whitespace characters.

So yes, is valid, but it continues

However, to avoid inadvertent errors, only 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.

5

Thanks for your help.

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

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

6

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

7

Oh okay.

Regarding your point:

image
image1783×765 38.9 KB

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

8

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

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

Do the field names and values look correct?

9

No, they’re still the same.

image
image1402×471 32.7 KB

10

Can you share the repository you are deploying from?