Home
Support Forums

Netlify Forms detecting form but not receiving data

I am attempting to implement a submission form inside my react app hosted on Netlify. I’ve managed to get Netlify to recognize the presence of a netlify form, and upon submission I receive an alert that says “Success!” (not redirected to a success screen like I have seen online), however any data submission does not make it’s way to “Recent form submissions” on the Site Overview dashboard on netlify. It simply states “Waiting on those submissions… We have detected an active form setup but haven’t received submissions yet – hang in there!”

I have my form in a component like this:

const initialState = {
  name: '',
  email: '',
  subject: '',
  message: '',
}

function Contact() {
  const [formData, setFormData] = useState(initialState);

  const phone = <PhoneIphoneOutlinedIcon />
  const email = <EmailIcon />

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

  const handleSubmit = e => {
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contact", ...formData })
    })
      .then(() => alert("Success!"))
      .catch(error => alert(error));

    e.preventDefault();
  };

  const handleChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });

  return (
    <MainLayout>
      <Title title={'Contact'} span={'Contact'}/>
      <ContactStyled>
        <InnerLayout className={'contact-section'}>
          <div className="left-content">
            <form className="form" name="contact" method="POST" data-netlify="true" data-netlify-recaptcha="true" onSubmit={handleSubmit}>
            <input type="hidden" name="contact" value="contact" />
              <div className="form-field">
                <label htmlFor="name">Enter Your Name <span>*</span></label>
                <input id="name" name="name" type="text" required onChange={handleChange} />
              </div>
              <div className="form-field">
                <label htmlFor="email">Enter Your Email <span>*</span></label>
                <input id="email" name="email" type="text" required onChange={handleChange} />
              </div>
              <div className="form-field">
                <label htmlFor="subject">Subject <span>*</span></label>
                <input id="subject" name="subject" type="text" required onChange={handleChange}/>
              </div>
              <div className="form-field">
                <label htmlFor="text-area">Enter Your Message</label>
                <textarea id="textarea" name="message" type="textarea" cols="30" rows="12" required onChange={handleChange}></textarea>
                <div>
                  <div data-netlify-recaptcha="true"></div>
                </div>
              </div>
              <button type="submit">Submit</button>
            </form>
          </div>
          <div className="right-content">
          
            <ContactItem title={'Phone'} icon={phone} cont1={'+1(909)731-4075'} />
            <a href="mailto:daviddel.731@gmail.com">
              <ContactItem title={'Email'} icon={email} cont1={'DavidDel.731@gmail.com'} />
            </a>
          </div>
          
        </InnerLayout>
      </ContactStyled>
    </MainLayout>
    
  );
}

This component is then being called inside of another components called Home.

And I have a hidden form element in my root HTML like this:

<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field" data-netlify-recaptcha="true" hidden action='/'>
      <input name="name" />
      <input id="email" name="email" />
      <input id="subject" name="subject" />
      <textarea id="textarea" name="message"></textarea>
    </form>

Hi @DavetheDev

Without seeing the rest of the code (I am assuming this is a snippet only as it appears incomplete) it is hard to judge, but it does seem like there is something not quite right.

You might find How to Integrate Netlify’s Form Handling in a React App | Netlify useful in getting your code straightened out.

I can update the post to provide the entire component if that would be more useful.

Could you please share the name of the site so we can check what’s happening on our end?