Trying Forms on React deploy

Hey @audrey

I clicked everything and found the modal under this button.

Not the most intuitive UI IMHO @CristianVogel

Thanks @coelmay and good to meet you !

When I click on the airplane nothing happens. I tried Chrome and Opera :upside_down_face:

:wave: @audrey, pleasure.

Very curious :thinking:

Firefox 96 is where the errors appeared @CristianVogel

hey @audrey - thanks - try refreshing the page and clicking on it again. I am noticing on deploy that sometimes, the form functionality isn’t loading up first time. Its not a pop-up, so it shouldn’t be blocked…

Also the app is only really going to work properly with MIDI on Chrome, because Firefox doesn’t have WebMIDI support

thanks for the feedback, noted… of course i’d LOVE to be able to receive your feedback through the Netlify form integration , which doesn’t work even though I have carefully followed the rather hacky workaround at How to Integrate Netlify’s Form Handling in a React App

I’m not a React Dev, however, using the code in the article you shared (which I have previously used but cannot find) I added an ajax-form branch to the basic Netlify/React Conact Form public demo: coelmay/netlify-react-contact/tree/ajax-form. This is deployed to ajax-form–confident-raman-fc2e11.

This is the submission I made

So I can confirm the code works. If you would like to share the repository you are deploying from, I am sure someone will happily assist you in debugging your code.

Ok, I see that your code there seems pretty much the same but you don’t have the hidden field hack from that support article.

If anyone can help, that would be great. I inherited the code base, and I am not a React Developer either… it has been a tonne of work to get to this stage, but here are some pointers into the codebase where the Form integrations are supposed to happen

Here is the component that renders the form dialog.

here is the ‘hidden form’ part in an HTML file located in public/

and here is the parent component handling the form interaction ( line 188 )

Also , I have been following this post very carefully.

I am suspecting some minify webpack plugin might be stripping the tags that the Netlify bots are looking for. It’s a theory. Will experiment.

1 Like

let us know what you find out!

My tests along the WebPack config are inconclusive. Netlify Form is still not working in my project.

i have deployed a number of times, deleted the form and retriggered builds, but nothing gets through. I am well and truly stuck.

I see you have a subject in the FeedbackForm.js component, however this is missing from the placeholder form in index.html.

Under the section Form Handling with a Stateful React Form you’ll notice the hidden form-name attribute is missing e.g.

<input aria-hidden="true" type="hidden" name="form-name" value="feedbackForm"/>

This is because this information is added in the handleSubmit function and is thus not required as a hidden value

handleSubmit = e => {
  fetch('/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

    /* **
     * form-name attribute added here
    body: encode({ 'form-name': 'feedbackForm', ...this.state })

    .then(() => alert('Success!!'))
    .catch(error => alert(error));



Ok so what you seem to be suggesting is that the html placeholder Form need to have EXACTLY the same structure as the Javascript /JSX rendered form we are actually trying to get data from?

Except for the hidden input field ‘hook’?

Yes. As it says in the article

Make sure the input fields in the HTML version of the form have a name attribute, and the parameters sent in the POST request have the same names as the input fields in the HTML form.

That only mentions names, not structure. It should add that the placeholder needs to be exactly the same ( except for the hidden hook )

I there are 4 names/values in one form, and 3 in the other, then are not all the same (one is missing.)

Under Forms setup → Work with JavaScript-rendered forms documentation it does say that

… and input fields with name attributes to match the inputs of your JavaScript-rendered form.

I tried this again… I have spend way too many hours of unnecessary dev time on this, and missed my deployment deadlines with the client.

I have adhered to the rather complicated guidelines for this service

Sorry, I was led to believe that Netlify is supposed to be helping us developers be more productive?
The dashboard tells me I have spent 103 build minutes trying to get this form feature to work!
That’s not fair imo, I don’t think my code is causing this bug, its the fact that Netlify can’t figure out how to implement forms properly for Javascript or Reactive forms.

And the fact of the matter is that the Forms feature like other stuff that I am now tentative to try out are charged when they don’t work.

Sorry , but this is not really acceptable. How are we supposed to assess a service like Netlify when the support is throttled for first time users of the service?

Un happy.

Hi, @CristianVogel. First, if you do go over your build minutes limit this month, please let us know and we will waive the charge this time. However, I’m also going to ask you for a favor. (You can say “no” of course and we will still waive any build minutes charges.)

I think this may actually be something different on just your local system and not an issue at Netlify at all. In other words, this is your code causing this, not ours.

I tested your form submission here and it worked the very first time I tested it:

If you check your form submissions you will see one with an email address of and a name of Netlify 2022-01-23 Test. I made that submission using Chrome and the URL above.

You should see that submission here:

In other words, I do think you have fixed it.

However, I do also believe that it is not working for you locally. So, why doesn’t it work for you?

Your site uses a service worker. This is a screenshot of the browser devtools information for your site:

My best guess is that this service worker caused an older version of your form code to be cached locally for you and it will start working on your system once you clear your local service worker. We have a support guide with more information about this here:

Note, that isn’t a service worker Netlify made. Your code is creating the service worker so if it is the root cause of this issue it is definitely not Netlify’s fault.

Again, if clearing your local service worker fixes this issue, I make the following requests which constitute my “favor” mentioned above. First, would you please re-read your post above this? Also, in the future, would you please consider being more gracious and patient with the people providing you with free technical support? We don’t ever deserve to be treated in that way but especially not if it was your code causing the issue all along.

Now, I also admit I could be wrong. If clearing the service worker this doesn’t fix the issue, please send us a HAR recording of the issue occurring. A HAR recording will contain all the information required to troubleshoot this.

1 Like

Hi Luke.

I am very happy to hear a message got through from the form. I inherited the code base from a developer who is no longer available to help me and did not understand the service worker part. I am really sorry about the tone of my previous post , it was framed by pure frustration and pressure. You are right to correct me, it’s not acceptable. Maybe you remember what it’s like
To be at team of one, jam stack or not, the work can sometimes exert real pressure on an individual

I will try what you have suggested in the detailed response and once again I apologize if it is my code.

Hi, @CristianVogel. I do hope the answer above helps and, as a friend of my often says, “The struggle is real!”

What I think he means by this is that everyone has difficulties in life and I do understand you were under real pressure.

We are still here and happy to assist as well. If clearing the service worker doesn’t resolve the local issue, please let us know. Note, it also looks like you did fix it by following the advice above (because it wasn’t working before but now it is). So, you do understand the code well enough to have fixed and it was only this edge case of the service worker still causing issues.

Finally, service workers catch many people by surprise as you will see if you search this support forum for that phrase. You are certainly not alone (and I personally had also never heard of service workers before joining Netlify).

To summarize, I do hope it is fixed and if not we are here to assist!


Now I know what Service Workers are. Thanks for pointing in that direction, my issue with forms is resolved and I hope to update the Service Worker part of the app, as it was playing a part in keeping the whole experience performant. I hope this edge case might be added to the knowledge base articles regarding Netlify Form integration