Form submission: wrong input keys displayed in the dashboard and email

Good morning,

I’m having an issue with the input keys (such as name, email and message) displayed in the dashboard and email in one of mine forms. I’m posting to Netlify via fetch on Gatsby.

Here you can see the fetch call fired on submit:

function encode(data) {
    console.log(data);
    return Object.keys(data)
      .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
      .join('&');
  }

  const handleSubmit = formValues => {
    console.log(
      encode({
        'form-name': 'contact-us',
        ...formValues,
      }),
    );
    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({
        'form-name': 'contact-us',
        ...formValues,
      }),
    })
      .then(() => setMessage('Successfully submitted'))
      .catch(error => setMessage(error));
  };

And this is the JSX form (I’m using Formik and its Form element):

                    <Formik
                        enableReinitialize
                        validationSchema={ContactSchema}
                        initialValues={{
                          name: '',
                          email: '',
                          message: '',
                        }}
                        onSubmit={(values, { setSubmitting }) => {
                          handleSubmit(values);
                          setSubmitting(false);
                        }}
                      >
                        {({
                          touched,
                          errors,
                          values,
                          handleChange,
                          handleBlur,
                          handleSubmit,
                        }) => (
                          <Form
                            name="contact-us"
                            data-netlify="true"
                            data-netlify-honeypot="bot-field"
                            onSubmit={handleSubmit}
                            {...bem('form')}
                          >
                            <FieldSet {...bem('fieldset')}>
                              <InputField
                                type="text"
                                name="name"
                                inputId="name"
                                labelText={nameInputLabel}
                                value={values.name}
                                error={touched.name && errors.name}
                                touched={touched.name}
                                onChange={handleChange}
                                onBlur={handleBlur}
                                isRequired
                                {...bem('contact-name')}
                              />
                              <InputField
                                type="email"
                                name="email"
                                inputId="email"
                                labelText={emailInputLabel}
                                value={values.email}
                                error={touched.email && errors.email}
                                touched={touched.email}
                                onChange={handleChange}
                                onBlur={handleBlur}
                                isRequired
                                {...bem('email')}
                              />
                              <InputField
                                type="textarea"
                                name="message"
                                label=""
                                inputId="message"
                                placeholder={textFieldPlaceholder}
                                value={values.message}
                                error={touched.message && errors.message}
                                touched={touched.message}
                                onChange={handleChange}
                                onBlur={handleBlur}
                                isRequired
                                {...bem('message')}
                              />
                              <Button
                                variant="primary"
                                type="submit"
                                {...bem('button')}
                              >
                                {submitButtonLabel}
                              </Button>
                            </FieldSet>
                          </Form>
                        )}
                      </Formik>

The form has name and netlify attributes set. From the console logs, it looks like the correct keys are posted, so the request seems correct.

The Input component that renders the input itself together with a dynamic label, like this

I should receive on Netlify something like this:

name: Ivan
email: ivan@test.com
message: Test message

But this is the result:

Name:
Ivan

E-mail Addresse:
ivan@test.com

:
Test message

It looks that for some reason, the key displayed is the dynamic label values instead of the input name attributes. Do you know how can I fix this? Is
Thanks a lot for your help! :smiley: