Form not working as intended with Toast

Support
1

Netlify site: https://happy-mcnulty-e8f9df.netlify.app/
Github: GitHub - Caweca105/portfolio

Hi, hope you are well.
I am trying to implement a toast after successfully submitting a form. When I submit my toast during brief seconds until it redirects or refreshes the page. How can I prevent this issue?

I’ve been looking around, and tried a few possibilities, but none of those worked for me.
Thank you in advance

2

Hi @Caweca105

Are you wanting to show the toast alert and not have the page redirect to the success page?

If so have you tried submitting via AJAX and removing the action... from the <form>? If you use an AJAX submit, you can choose what happens after the submit, including redirecting to another page or loading a modal/alert.

If this doesn’t work, can you share details of what you have tried?

3

Sorry, yesterday when I posted this I was half-asleep. I used Next.js for this and this is a snippet of my code:

> <form name='contact-form' 
>         method='POST' 
>         data-netlify="true"
>         action="/?success=true"
>         enctype='application/x-www-form-urlencoded'
>         >
>         <input type='hidden' 
>         name='form-name'
>         value='contact-form' 
>         />

Thank you and sorry for the trouble

4

Hi @Caweca105,

I’m not seeing the implementation suggested by @coelmay.

You will need to remove the action attribute in the form and use JavaScript to submit the form instead.