Netlify form submissions not working in React web application

[osamakawish]

Netlify site name is osamakawish.netlify.app, or osamakawish.com. However, I’d prefer not to publish the form until the form is working. Though I can publish it for convenience if people feel it’ll help with the issue.

I made a react app with vite and to put it simple, the form submissions aren’t working.

Relevant info:

index.html:

...
<form
      name="contact"
      netlify-honeypot="bot-field"
      id="contact-form"
      netlify
      hidden
    >
      <input type="hidden" name="jobType" />
      <input type="hidden" name="priceTier" />
      <input type="text" name="name" required />
      <input type="email" name="email" required />
      <input type="tel" name="phone" />
      <textarea name="message"></textarea>
    </form>
...

HireMe.tsx (where the actual visible form is):

...
<form netlify-honeypot="bot-field" id="contact-form" data-netlify="true">
        <input type="hidden" name="form-name" value="contact" />
        <input type="hidden" name="jobType" value={jobType || ""} />
        <input type="hidden" name="priceTier" value={priceTier || ""} />
        <label>Name*</label>
        <input
          title="Name"
          type="text"
          name="name"
          value={state.name}
          onChange={handleInputChange}
          required
        />
        <label>Email*</label>
        <input
          title="Email"
          type="email"
          name="email"
          value={state.email}
          onChange={handleInputChange}
          required
        />
        <label>Phone</label>
        <input
          title="Phone"
          type="tel"
          name="phone"
          value={state.phone}
          onChange={handleInputChange}
        />
        <label>Message</label>
        <textarea
          title="Message"
          name="message"
          value={state.message}
          onChange={handleInputChange}
        />
        <button type="submit">Send</button>
      </form>
...

I’ve tried looking around for bugs that could apply to my issue, but I couldn’t find any.

[Melvin]

Hi @osamakawish,

Thanks for reaching out!

We have a Support Guide on common form issues to help with troubleshooting:

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

Could you review the guide to see if that helps with resolving the issue?

If you continue to have issues, could you provide us with a link to your live form, and a brief description of what debugging steps you have taken. Thank you.

[osamakawish]

So I guess my issue belongs in this section:

Submits fine, yet no submissions in UI:
When you’re absolutely sure that the submissions are being sent correctly by the browser, but you’re not seeing them in the UI, there are 2 common scenarios that might cause this:

1. The endpoint that you’re submitting to has a redirect. For example, if you’re using JavaScript to submit like: fetch(‘/’… and you’ve a redirect rule like /* /foo 301!, submissions would probably not work. This is because the submissions are being “consumed” by the redirect rule. Instead, you cans set the endpoint to any other page that doesn’t redirect. Note: 200 rewrites could cause problems too.

2. You’re using some kind of server side rendering to render the endpoint. For example, if you’re rendering the page that you’ve set as the endpoint using a serverless function, you’d not seem the submission in the UI. The solution is similar, set the endpoint to a page or an asset (like /favicon.ico) that already exists.

3. We use Akismet on all form submissions 174. If you see the form in the app.netlify.com 152 UI, but you don’t see any of your test submissions, double check that you aren’t sending junk info in your test submissions or submitting over and over again from the same IP address (which looks spammy and may be hidden in our UI until you choose to view the spam submissions 166).

I haven’t personally made any redirects, but I’m not sure of any other redirects to forms that may have been introduced as part of vite or react.

I’m somewhat new to React, but I haven’t created any serverless functions, I don’t think, as I don’t really even understand what those are.

I see the form in my UI, but not my submissions. The test submissions weren’t in my spam submissions either.

[hrishikesh]

I don’t see the form anywhere on your website. Where is the form exactly?

[osamakawish]

The form is not published. Only deployed. I was testing in my deployed preview. Like I said in the post, I can publish it if it helps for testing.

Edit. I published the website. Though I haven’t tested the form for responsiveness yet so it may not look fine on mobile. Regardless, here’s the page: Osama Kawish: Portfolio.

[luke]

Hi, @osamakawish. I replied in the support ticket as well. I think the only reason it isn’t working is that the client-side javascript is using GET instead of POST to send the submission. If you make that change from GET to POST, everything else is being done correctly and it should work with that change.