@perry I fear as though I may be becoming “a netlify forms person” Send Cassidoo stat!
Hi @markelarizaga
“Half processed” is almost there
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!
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 ) – 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
To your second point, submit buttons (or input type submit) don’t need a name
Hope that clears things up!
–
Jon