Netlify Forms Getting Sent But Body Not Showing Up In UI

Support
,
1

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:

image
image1200×266 12.4 KB

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
2

Hey @LuisOsta,

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

3

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

4

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
5

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.