Form input name showing up in Netlify dashboard, but not in email redirect (BUG)

I have an extremely simple form. But when I test the form, my name doesn’t show up in the email. It does however show up in the Netlify form dashboard. So I know I built things right, but I assume someone might want to know about this bug.

      <form name="contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field">
        <div className={FooterStyles.formTop}>
          <label htmlFor="name">
            <input type="text" id="name" name="name" placeholder="Name:" className={FooterStyles.name} />
          </label>
          <label htmlFor="email">
            <input type="email" id="email" name="email" placeholder="Email:" className={FooterStyles.email} />
          </label>
        </div>
        <textarea name="message" id="message" cols="30" rows="10" placeholder="What's on your mind...?" className={FooterStyles.message} />
        <input type="submit" value="Send" className={FooterStyles.submit} />

        {/* Netlify needs this hidden form in order to work */}
        <input type="hidden" name="form-name" value="contact" />
      </form>

Gatsby + Netlify

Hmm, that is quite odd! I can see your definition has no “label” for name in our database - just an "" empty string…but the email field is the same and that comes through. The Message also has no label - but instead of being an empty string, it has a literal “nil” in the database instead of an empty string value.

Could you link me to the html page on your site that has the form so I can poke a bit more? I couldn’t find it by browsing around the page.

Good morning,

I’m having an issue that might be related with this one. I’m posting via fetch on Gatsby. I don’t understand what’s going on there, but it looks like the submissions I’m receiving have all the wrong label.

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));
  };

The form has name and netlify attributes set.

The Input components render the input itself together with a dynamic label, like this

So my submission and my email should be something like:

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 like is using always the label value instead of the input name. Do you know how can I fix this?
Thanks a lot for your help! :smiley:

Hey @i.teso, I’m wondering if this might have to do with your encoding function? Could you try something like this instead of your current encode function?
https://github.com/kaganjd/gatsby-starter-default-form/blob/form-custom-success/src/components/nameform.js#L15-L21

And then make your POST body this:
https://github.com/kaganjd/gatsby-starter-default-form/blob/form-custom-success/src/components/nameform.js#L33

and then let us know if you’re still running into this issue?

Good morning @jen, and thanks for your reply.

I wrote also a question here but we can continue on this thread :smiley:

I’ve tried your way but it doesn’t work as well. To give to you a little bit of contect, I’m using Formik to render my form, so at the moment the only thing not implement is the e.preventDefault() method at the end of the post function. Here’s the form itself:

                    <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 point is that, since I’m manually set the values on the post request, why the form gets other values form the form labels? Here are the console.log of the data I’m supposed to send,

  • with the encode method: form-name=contact-us&name=Ivan&email=ivan.test%40test.com&message=Test%20message

  • with the createFormDataObj method: form-name=contact-us&name=Ivan&email=ivan%40test.com&message=Test+message+for+you

As you can see in both the cases the labels are set correctly set, but apparently not sent, and in the end is not what I get on the dashboard :confused:

To clarify, my ideal “scenario” would be to send the data only via fetch to avoid completely Netlify to check the form labels. I’ve also tried for instance to remove the data-netlify or any reference to the form itself, but of course, it’s not working.

Unfortunately, I need to use Formik here, so I can’t really build a “flat” form to replace it (even if I don’t think it’s about formik, as you can see in the screenshot posted, the HTML result is as expected and the inputs’ name attributes are correctly set).

I’m confused because the only post request is sent by fetch, where I’m basically “hardcoding” the keys. So actually the point is: is the fetch call sending data to the dashboard or it’s just skipped completely?

I think I’ve found a solution. I’ve created a fake form outside the Formik's form element, with all the necessary Netlify attributes (right form name, data-netlify) in order to let Netlify pick the right markup

                      <form
                        hidden
                        name="contact-us"
                        data-netlify="true"
                        netlify-honeypot="bot-field"
                      >
                        <input type="text" name="name" />
                        <input type="text" name="email" />
                        <input type="textarea" name="message" />
                      </form>

and then I send the values form my formik form via the handleSubit method from formik / post request.

const createFormDataObj = data => {
    const formData = new FormData();
    Object.keys(data).forEach(k => {
      formData.append(k, data[k]);
    });
    return formData;
  };

  const handleSubmit = formValues => {
    const { name, email, message } = formValues;
    const data = {
      'form-name': 'contact-us',
      name: name,
      email: email,
      message: message,
    };

    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams(createFormDataObj(data)).toString(),
    })
      .then(() => setMessage('Thank you, your request has been sent'))
      .catch(error => {
        console.log(error);
        setMessage('There was an error sending your request, try again later');
      });
  };
2 Likes

Awesome, I’m so glad you’re up and running now and really appreciate you sharing your full fix here- someone else was running into trouble with their Formik form the other day, going to point them to your post!

I am using react-hook-form and faced this same issue too. Your suggestion help fixed it. Thank you so much.