Netlify Forms Getting Sent But Body Not Showing Up In UI

Summary
I’ve managed to integrate Netlify Form into my website. Its being recognized and picked up by Netlify and shows up in the Form submissions. But when I open the submission none of the body shows up there, its completely empty.

In case it matters the site is built using Gatsby v4.1.3.

This is what shows up:

How can I solve this? This is what I used to implement the functionality - Forms setup | Netlify Docs.

Form Component

export const NewsletterCard: React.FC<NewsletterCardProps> = ({
  sideImage,
}) => {
  const [emailAddress, setEmailAddress] = useState("")

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    sendNetlifyFormRequest(FormName.Newsletter, { email: emailAddress })
  }

  const handleEmailAddressChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEmailAddress(e.target.value)
  }
  return (
    <StyledPaper color="blue" gradient>
      <ImageContainer>
        <StyledImage image={sideImage} alt="icon_emailaddress" />
      </ImageContainer>
      <div>
        <TitleTypography variant="h4">
          Get our latest software insights to your inbox
        </TitleTypography>
        <Form
          onSubmit={handleSubmit}
          name={FormName.Newsletter}
          data-netlify="true"
          method="post"
        >
          <input
            type="hidden"
            name={FormName.Newsletter}
            value={FormName.Newsletter}
          ></input>
          <Input
            label="Email Address"
            placeholder="Enter your email address"
            onChange={handleEmailAddressChange}
            value={emailAddress}
          ></Input>
          <Button variant="outlined" type="submit">
            Subscribe
          </Button>
        </Form>
      </div>
    </StyledPaper>
  )
}

Function Handling Network Request

export enum FormName {
  Newsletter = "newsletter",
  Contact = "contact",
}

export const encode = (data: any) => {
  return Object.keys(data)
    .map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
    .join("&")
}

export const sendNetlifyFormRequest = async <T>(
  formName: FormName,
  data: T
) => {
  return fetch("/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: encode({ "form-name": formName, ...data }),
  })
}

This is the form data passed to Netlify

form-name=newsletter&email=luisosta1999%40gmail.com

Hey @LuisOsta,

To narrow the problem, could you please confirm if the problem exists even when you remove the JavaScript-based submission?

@hrishikesh But I need the JS-based submission? That’s the version that I was trying to implement. How could it work without it?

I am asking you to do it to “narrow down” the issue. Once we know if the error is in the JS or if it’s somewhere else, we can look accordingly.

1 Like

I was actually able to fix it! What did it is to add a name property to the inputs involved. So the input component now looks like this:

          <Input
            label="Email Address"
            placeholder="Enter your email address"
            onChange={handleEmailAddressChange}
            value={emailAddress}
            name="email"
          ></Input>

The only change is the name property. I really appreciate the help!

I think what I had missed from the website was this quote:

a netlify attribute and input fields with name attributes to match the inputs of your JavaScript-rendered form.