Form redirect to custom page not working (ReactJS)

I believe this issue is similar to 3821, but in my case the page does in fact exist. My site is on “gracious-babbage-21fe68”. The repo is at this url.

My custom success page for form submissions does not redirect as it should. In order to get Forms to behave correctly - no empty fields, and successful submissions - my form is present in the JSX of my page (contact.js) and in my public folder (contact-form.html). This arrangement results in the standard Form submission page and the results end up in my Dashboard.

Using this kind of setup, is it necessary to have a success.html page in the public folder as well?

Hey @chrisfinazzo :wave: ,

It looks like your published deploy does not contain the /success.html page. The index.html is being served as success.html based on your redirects. Keep in mind that the path must be relative to the site root.

Also, your first two redirects rules are misconfigured and will not work. You’ll need to remove the / so the syntax would look something like:

https://www.yoursite.com/ https://yoursite.com/ 301

I hope this helps and please keep us posted! :slight_smile:

1 Like

I think the redirects should be fixed - I have also removed a reference to History.pushState which may have been messing up routing. The current TOML is here and the form (located at src/components/form.js) I am using is as follows:

<form name="contact" data-netlify="true" netlify-honeypot="bot-field" method="POST" action="/success">

It is interesting that success.html does not exist in the public directory as the url definitively there.

Hey there,

Thanks so much for your patience this past week-- we have been a bit underwater and therefore are a bit slower to respond that usual.

I see what you are saying about the URL loading. What is happening here is that the success URL is loading the homepage, but React is changing the content of the page to the success page content. You can see in your deploy that the page does not exist.

Going forward, you can change: reverse-job-posting/form.js at main · chrisfinazzo/reverse-job-posting · GitHub

action="/success"

to

action="/#/success"

That would send the request to the home page and that should work for Netlify to be able to post the form, plus the site’s JavaScript would also be able to render the page based on that URL.

If that doesn’t work, you can try making a static file in the root of your repository for your custom success page.

Let us know if this gets you on the right track! Thanks again for your continued patience here.

1 Like

Ah, that seems to do what I was hoping. Had to do it in both src and public directories, but I should have expected that.

Thanks for clearing this up.

1 Like

Glad to hear it is working now! Happy building :rocket: