Trying Forms on React deploy

Support
22

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.

23

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

24

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.

25

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.

26

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:

https://cranky-ride-fe68e0.netlify.app/

If you check your form submissions you will see one with an email address of none@example.com 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:

https://app.netlify.com/sites/cranky-ride-fe68e0/forms/61ed8eac92f4e2000857cbb4

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:

screenshot
screenshot904×374 66.8 KB

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
27

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.

28

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!

2 Likes
29

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