Netlify forms submission cannot use custom success message in React

Support
1

I deployed a React site with a form using a Cruip.com template. Everything on the site and the form is working fine, except I cannot get the form to use my custom action page and the default Netlify “thank you” message shows no matter what I do.

On form submission the form works, and the page appears to redirect to my custom action=“/follow-up” page. It is visible in the URL bar, but the Netlify thank you message still appears. A simple refresh actually loads the page I want.

image
image770×472 17 KB

I have a /public folder with a _redirects file in there with /* /index.html 200 and the direct linking on the site is working fine.

Form is built and working with a simple action=“/follow-up” and I can see on the site everything is working.

Contact Us — Decise ← this is the form
https://deciseglobal.com/follow-up ← this in the custom success message

3

Sorry if you’ve already been over the docs, but does your action param value start with a /, like so?

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

(taken from Forms setup | Netlify Docs)

4

Hi Phil, thanks for replying. I have read every doc under the sun and yes my action=“/follow-up”

you can see the page live: deciseglobal.com/follow-up

5

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. Please start here and work through these resources!

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide more information such as what you have already tried, and a link to your live form. :slight_smile:

6

I was able to solve this with the following code:

function Contact() {
  let navigate = useNavigate()
  const submitHandler = (e) =>{
    e.preventDefault();
    let myForm = document.getElementById("contact-form");
    let formData = new FormData(myForm);
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: new URLSearchParams(formData).toString(),
    })
      .then(() => navigate('/follow-up'))
      .catch((error) => alert(error));
  }
2 Likes
7

Hey there, @kylepott :wave:

Thanks so much for coming back and sharing this! It will definitely be beneficial for future forums members who encountering something similar.

Happy building!

8

Saved my day sir!! Thanks a lot. This has been driving me crazy on two different sites I have deployed. You sir are a gentleman and a scholar.

1 Like
9

You are most welcome. I got tripped up on this twice, too and knew others would find the code useful!

1 Like
10

I am so glad this got you on the right track, @jakesmileydev.

11

Or using useHistory from the react-router-dom, we can replace the navigate using const history = useHistory();
Then .then(() => history.replace(/your router).

Thanks Kyle Pott!

1 Like
12

Thanks for coming back and sharing, @SnailCoder1 :raised_hands: