Netlify custom success page not showing (Trying to display custom success page and redirect to homepage)

Support
, , , ,
1

I would like to create a custom success page for my react app. I currently get the default success page when I submit a form with the relative path of the custom success page in the url:

image
image1915×820 46.4 KB

I’ve added the action=/relative-path attribute to both my html and js files but it still doesn’t work.

My end goal is to display the custom success page and have a link that redirects to the ‘About’ page I have created (which I also don’t know how to do).

  1. Am I missing something?
  2. To redirect to the ‘About’ page will I have to use <BrowseRouter>, <Routes>, etc. from react or can I use something simple like a href="..." ?

Thanks in advance

Deployed app: https://cp-retrofolio.netlify.app/
Repo: GitHub - briandgomez/cp-retrofolio at netlify-deployment

2

You’re using React, so it won’t be able to have a custom page to redirect to as there’s no real HTML page. It’s a SPA, all rendered using JavaScript.

To display a custom page, you’d have to add a onsubmit event handler to the form along with event.preventDefault(), and then programatically navigate to using: useNavigate v6.15.0 | React Router.

3

So to clarify @hrishikesh I can use React Router to display the custom success page, redirect to my homepage ANDI don’t need to create a HTML page for the success page?

4

Yes, you’re right. Since your entire app is using JavaScript to work, adding more to handle the redirect functionality would be the better way here.

5

@hrishikesh So I’m able display my custom success page but the contact form is no longer working. Whenever I try to submit a form it no longer appears on my form dashboard or email.

I’m not sure what exactly happened since I didn’t really changed anything that would affect the contact form from being sent.

Here is the last commit of when the form was working properly: changed path for action attribute · briandgomez/cp-retrofolio@690682f · GitHub

Any ideas?

6

You’re not submitting a form at all:

cp-retrofolio/src/Components/Pages/Contact.js at netlify-deployment · briandgomez/cp-retrofolio (github.com)

You need to refer to some docs: Forms setup | Netlify Docs

7

You’re referring to “Submit a HTML form in AJAX” section in the docs, correct?

8

Yes, that’s correct.

9

Thanks @hrishikesh its working exactly how I want it!
Both of your tips worked:

  1. Submit contact form using netlify forms (AJAX)
  2. Redirect to custom success page
10

Oh that’s awesome! I’m glad our AMAZING Sr support engineer @hrishikesh could be of help in solving your issue. Thanks for coming back and sharing this with the community.