Netlify forms is removing one of my input fields for no reason? GatsbyJs

Support
1

Hey guys, I’m using a simple GatsbyJs component to render a simple form with Netlify…

As soon as my page loads…one of my input fields is being removed and I have no idea why…

The field being removed is an input type URL field…so people can send me a YouTube link…I tried switching it to a input type TEXT but still…it is removed automatically…it shows for 1 second then disappears…

Here’s my form:

<form name='links' method='POST' data-netlify='true'>
  <input className='input-field' type='text' name='name' placeholder='Your name' required />
  <input className='input-field' type='email' name='email' placeholder='Your email' required />
  <input className='input-field' type='url' name='url' placeholder='Link to your clip' required />
  <button>Submit</button>
</form>

I also had a bot-field in there…but I removed it just to make sure it’s not interfering…the form works…I get the name and email…but the url is being removed…

Any clues??

Thanks!

2

Seems likely you have 2 definitions of your form in html (or that is the javascript version of the form, and the html version is different). We parse the form at build time, from HTML ONLY, and if there are two copies, only one will win. If you update only the JS, the HTML will still be our source of truth.

This article talks about how to debug form misbehavior and I’d bet my next paycheck that the answer is in there :slight_smile:

[Support Guide] Form problems, form debugging, 404 when submitting

3

Thanks alot for the reply! I actually went through that article…no mentions about disappearing input fields…

Funny thing I duplicated the url input field and now it shows! I have 4 input fields on my form but only 3 show…I’m like literally out of clues!

4

Me neither, without more information. I’d expect that it is what I said - the first update was to some javascript that maybe gets rendered to html by your SSG and it maybe missed that field? Anyway, glad to hear you have a solution for now :slight_smile:

1 Like
5

Thanks again! I actually found the solution and I’m sharing for others to find in the future!

If you are using JavaScript to render your forms…I.E you’re not using pure HTML…but instead you have a component that renders HTML…as in REACT, GATSBY, VUE and so on…

You need to manually add a hidden input field as the first item in your form…like this

<input type="hidden" name="form-name" value="contact" />

Don’t forget to make sure the value matches the name of the form as well!

Basically when using pure HTML…Netlify adds this field automatically to your form…but when using any kind of JavaScript library or framework…you need to add it manually!

Hope this helps other people in the future!

Cheers

1 Like
8

Hi @ctaminian, this is actually included in the following blog post: How to Integrate Netlify’s Form Handling in a React App, however I can see from this case that we should surface it more clearly. Good catch debugging that on your own!