Netlify Forms - Custom "thank-you" page using nextjs

Hello people!

I’m playing around with netlify-forms on one of my first netlify-pages.

Currently I’m facing the following issue:
When I submit my form, everything gets submitted correctly, but the default netlify thank you page/message is shown, even though I setup a custom url/page in Nextjs, which can be accessed via a direct link.

So basically I have this site https://diveout.app/ which has a small form, which should redirect to https://diveout.app/danke after submission and show my custom page, instead of the default netlify page.

It obviously works for the demo app(https://brave-montalcini-261c22.netlify.app/contact), but I can’t figure out what is wrong with my setup.

I really do hope that someone has an idea what is wrong :crossed_fingers:

I managed to find a way to reproduce this behaviour:

  1. use https://github.com/cassidoo/next-netlify-portfolio-starter as a starting point (direct deployment: https://app.netlify.com/start/deploy?repository=https://github.com/cassidoo/next-netlify-portfolio-starter&utm_source=github&utm_medium=nextportfoliostarter-cs&utm_campaign=devex)

  2. Change the action and the file name of the thankyou page:

  • components/ContactForm.js change line 5 to action="/somethingelse"
  • rename pages/success.js to pages/somethingelse.js
  1. You will be redirected to the default thank you page.

I also tried it the other way around, to use success in my project, but unfortunately it doesn’t work.

Are there some rules on how components/files should be named?

hey @fbring! thanks for surfacing this :slight_smile: i followed these steps and don’t see this behavior. check out my fork (last 2 commits on master) https://github.com/lindsaylevine/next-netlify-portfolio-starter and the deployed app here https://form-issue-repro.netlify.app/contact (standard form on top, form with your suggested changes on bottom). let me know if anything looks off in here. this generally confirms to me that it’s not, by chance, a naming thing. and since /success doesnt seem to work for you, there must be something else off here - especially since it’s happening in your fork of cassidy’s app and your own app.

my initial thought was that it might have to do with your custom domain, but that doesn’t make sense since you reproduced it in another project…

some initial questions:

  1. do my committed changes in my fork look exactly like your setup (in both apps)?
  2. how are you deploying your app(s)?
  3. can you share your toml file and _redirects of your main app?

thank you!!

Hi @lindsaylevine thanks for checking this one!

Your repo looks exactly how I described it and it works :upside_down_face:

I also tried to fork your repo and change the action and page, but it still works. I don’t know what is going on :smiley:

To answer your questions:

  1. The setup is exactly the same, just the naming is different
  2. Both projects are github repos (diveout is private though), connected to netlify - nothing special as far as I know. Do you need any more specific answers here?
  3. Sure, netlify.toml looks like this and I haven’t setup a _redirects.
[build]
  command = "npm run build && npm run export"
  publish = "out"

haha very strange… can you try to deploy your app using the CLI? https://docs.netlify.com/cli/get-started/#installation

Hi @lindsaylevine!

Thank you soo much - I just deployed via the CLI and now it works :tada:

Just for the record - I didn’t change anything in the code, just deployed via CLI

1 Like