React form action not working

Support
1

I have a contact form that is working just fine except for the action. It will never go to my custom page, always to the Netlify default.

in my index.html:

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

jsx form:

<form
        name="contactForm"
        action="/contact?success=true"
        method="POST"
        data-netlify="true"
        netlify-honeypot="bot-field"
        className="contactForm"
      >
        <input
          type="hidden"
          name="form-name"
          value="contactForm"
        />
        <input
          type="email"
          name="email"
          placeholder="Your email"
        />
        <input
          type="text"
          name="name"
          placeholder="Your name"
        />
        <textarea
          name="message"
          placeholder="Messaage"
        />
        <button type="submit">Submit</button>
      </form>

I’ve read every other related support cause but had no luck.

2

Hiya! Welcome to the Netlify Forums. Sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. I know you mentioned you read every related support cause, but I wasn’t sure if you were referring to Support Guides or not. Please start here and work through these resources if you haven’t seen them!

If you are still having problems, please the information we ask for in this guide:

  • The URL for your live form as you want visitors to use it
  • The URL of your deployed html form. In case you have a javascript form, we need to literally be linked to the html version you’ve deployed, as mentioned above (look for “ pure javascript form ”)
  • The form name that you’ve set and that shows in our UI (it looks like this is contactForm based on your post above)
  • Any errors or logs from the Netlify build logs, dashboard or browser developer console
  • Description of anything you have tried that did or didn’t help or make things better/worse

Thanks so much!!

3

Hi Hillary,

Thanks, I did read that support guide.

  • Here is a deploy version of the form: Tasting Grounds | Discover, Rate, Share, & Brew Coffee Together
  • I’m not exactly sure what to show you here. It is in my index.html file but in that deploy it seems Netifly does some magic on that?
  • No relevant errors noted
  • Hard to list everything I’ve tried at this point. Various iterations between the html form and javascript form, Changing various action URLs, etc.For all, the submission continues to work and the action does not.

Hope this is enough information. Thanks!

4

Hey @5a9d1751599ea7d5b0cc,

Your website is served via a redirect. You cannot have custom success page with that. Here’s an alternative solution:

5

Thanks, that was not clear at all to me before, even as described in the linked alternative solution.

This article has a decent solution for anyone looking: Function Component React Form Submission on Netlify - DEV Community 👩‍💻👨‍💻