Forms not being sent with Next.js

I’m trying to implement Netlify Forms into my Next.js site (http://lovana.netlify.app). I’m following the docs, specifically the ones talking about how to do it for React apps but I’m not being successful.

I’m exporting the Next.js site to the out directory and specifying that directory as the publish directory. Given that Next.js exports the site to plain html, I’m assuming Netlify could detect the form as an HTML form so I tried both the standard way and the trick for React apps consisting on including a hidden form in the page.

The problem for me is that Netlify detects the form (I can see the form with the correct name in the dashboard) but I’m not being able to receive the submissions.

Also, I have a redirection to success message using action=“/contact/success/” but when submitting the form I’m getting a Next.js 404 page. Just reloading the same page loads it properly so the page is actually there: lovana.netlify.app/contact/success.

Any clue?

hmm, that’s frustrating for sure! The first thing i want to have you try is to look through this guide and see if there is anything helpful.

This Support Guide is the first port of call to debug any forms issues.

If that doesn’t help, please let us know.

1 Like

Hi Perry,
Thanks for the answer. I have just reviewed the article you linked.

  • I can’t see the hidden field described in point 2. However I do see the name of the form in the netlify.app dashboard of the site. It’s like the form would be “half processed”.
  • I don’t have a name attribute in the submit button but I assume this is not required because I have another side whose submit button doesn’t have a name and it works.

In the other site I have (bfhabogado.com)I’m submitting the form using Javascript, that’s the only difference I can see. However, no using JS should work as mentioned in the docs.
I hope this info helps.

@perry I fear as though I may be becoming “a netlify forms person” :eyes: Send Cassidoo stat!


Hi @markelarizaga :wave:t2:

“Half processed” is almost there :stuck_out_tongue_winking_eye:

To your first point - yes, the name showing up in the dashboard is a great sign. It indeed means the build bots picked up your netlify tag and transformed your html then set up a listener for the POST, set up the UI, and set you up for success! :tada:

The best way to visualize that is to actually curl your own site (whichever page has the form on it; looks like your root index does :100:) – or if you’re a tad more sane, httpie is my flavor. Regardless - hitting it directly and inspecting it as-delivered (without any browser processing) reveals wonders. Check it out. This is what comes back for https://lovana.netlify.app (with a ton cut out-- this is just the form):

<form name='contact-form' method='POST' action='/contact/success'
  enctype='application/x-www-form-urlencoded'><input type='hidden' name='form-name'
    value='contact-form' />
  <div class="field half first"><label for="name">Nombre</label><input type="text" name="name"
      id="name" /></div>
  <div class="field half"><label for="email">Email</label><input type="email" name="email" id="email" />
  </div>
  <div class="field"><label for="message">Mensaje</label><textarea name="message" id="message"
      rows="6"></textarea></div>
  <div class="field form-terms"><label for="terms">Condiciones del formulario</label><input
      type="checkbox" name="terms" id="terms" /></div>
  <ul class="actions">
    <li><input type="submit" class="special" value="Enviar" /></li>
    <li><input type="reset" value="Borrar" /></li>
  </ul>
</form>

So we can see that netlify did fully bake the form. It has the two markers of a good form… baking (lol): the netlify tag is gone, and a hidden field with name='form-name' and value='<your form name>'. The issue comes when you look at that same markup in the browser. That hidden input element is gone.

Netlify forms will not accept your submitted POST unless the form-name=<your-form-name> field is present (which comes from the hidden field they add for you statically). I’ve never dug into the React.hydrate() method before, but my presumption is that when hydrating on the front end, it noticed that a pesky hidden input somehow got into the markup and decided to revert back to the markup you wrote for that component which doesn’t have said hidden markup.

The fix should actually be pretty easy. Just add that hidden field yourself in your component markup jsx. That’ll ensure it’s present when the submit routine runs and your data makes it to Netlify Forms happily :slight_smile:


To your second point, submit buttons (or input type submit) don’t need a name :+1:t2:

Hope that clears things up!


Jon

1 Like

Hello Jon!
Indeed, you were right. Explicitly adding the hidden field did the trick. I’m able to get the form submissions in the Netlify dashboard now.
Thanks a lot to both, @jonsully and @perry

Piping in here to say I wasted a considerable amount of time before I found the solution above. It would be cool if something about this was added to the netlify forms docs, but I understand why it isn’t because from my POV it’s actually a next.js issue (more specifically an issue of me not understanding what next was doing that was messing w/netlify forms)

Manually adding the field made my next.js / netlify forms work together.

It’s actually documented here:

Hey @jonsully, hopefully you are doing well. Actually I am stuck in the same issue…when I inspect my page the netlify-data attribute is not there on deployed site but it’s available on localhost:3000.

Can you please help me to elaborate your solution or give some example. I can’t understand your provided solution. Thanks alot dear :heart:

Simply put, you need to add a hidden input as