Nextjs App form submission is not working on Netlify

Support
,
1

Hi everyone, I have an issue with my NextJs App. I configured my contact form and it’s been detected on Netlify site settings as well but not able to see any of my submissions.

I have my Nextjs app running here at https://flowdx-v2.netlify.app

This is what I have tried so far,

  1. I have an endpoint @‘api/contact’(this uses nodemailer pkg that sends the mail to my gmail, working perfectly on my local machine).
  2. I have created a static contact.html page inside the public folder, and Netlify is showing that in the build. Under the forms section of the site overview, it shows that the contact form is detected.
  3. I am using Formik to build my form component. This form has been given the same name as the static HTML name. ie. contact. All the input controls have name attributes that are exactly matching with the static HTML field names.
  4. If it is just an SSR issue, I tried support guides, but I am unable to understand some suggestions like pointing my end-point to some static source.?

Please explain me how can I resolve this issue.

Thank you.

2

Are you trying to use Netlify Forms? If yes, I don’t understand this part:

Any particular reason to add that?

3

Yes, as per the current implementation… it revives the form fields and sends the data to my email.

4

This I realised after deploying into netlify. So I am continuing that…

  1. If I just want to continue to work with only netlify forms… then I don’t need this at all?
  2. What if I would like to continue with my end point…?
5

Yes, if you wish to use Netlify Forms, you don’t need that at all. If you wish to use the custom functionality of your API handler, you can’t use Netlify Forms*.It’s an either-or situation.

* You can, but it would take slightly more efforts and is not worth it in my opinion.

6

so if it is either Netlify or no solution, I would like to go with Netlify’s forms only. Can you guide me on how to achieve this with the current setup of using Formik forms and the handle submit method?

7

Alright. In that case, you can simply change the fetch from /api/contact to static file on your site like / or /favicon.ico.

8

Thank you so much. This resolved my issue. I set the end-point to fetch(“/”,…).

9

awesome. glad to hear it!