Receiving empty forms

[abdu]

Hi,

I created a contact form by mostly copying this. The form works but received fields (name, email, message) are empty. To be honest, I’m clueless why this is happening.

Here is contact.js: https://pastebin.com/2Aiq5uzm

Thanks for reading/helping.

[jen]

Hey @abdu,
A few things:
Have you checked out this Support Guide on forms?

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

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

I also wrote about Gatsby forms here:

[Support Guide] Netlify forms with custom success pages for Gatsby and Nuxt

Last reviewed: August 2023 It’s a common design pattern to route visitors to a new page when they successfully submit a form. But figuring out how to get that route working can be tricky. Do you need a _redirects file? (Spoiler alert: no.) Are your form attributes set up correctly to work with Netlify? When you’re deciding which routing functions to use, do you start at the framework (React, Vue) level, the static site generator (Gatsby, Nuxt) level, or somewhere else? This post links to examp…

It sounds like, if your forms are going through but you’re not seeing the data, there could be something off with the data encoding function where you get the inputs in the right shape to send to our backend? Are there any errors in your dev console when you hit submit?

Last thing! Could you please send your Netlify URL so we can check it out?

[abdu]

Hi @jen,

Thanks for the reply. I sent a message using an incognito window, all chrome extensions disabled. The data showed up this time.

I think LastPass extension is somehow breaking the form data. (Not sure tho, google says so)
Here is the console log when using a normal window with extensions:

DevTools failed to load SourceMap: Could not load content for chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/sourcemaps/onloadwff.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
react-dom.production.min.js:191 [Intervention] An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance. See https://crbug.com/954323
onloadwff.js:formatted:30882 Assertion failed: Input argument is not an HTMLInputElement
getFormProfile @ onloadwff.js:formatted:71
setFieldValue @ onloadwff.js:formatted:71
formKeydownListener @ onloadwff.js:formatted:71
onloadwff.js:formatted:30859 Uncaught TypeError: Cannot read property 'type' of undefined
    at setFieldValue (onloadwff.js:formatted:30859)
    at HTMLFormElement.formKeydownListener (onloadwff.js:formatted:30771)
setFieldValue @ onloadwff.js:formatted:71
formKeydownListener @ onloadwff.js:formatted:71

[perry]

that definitely sounds like a possibility, @abdu! We’ve seen even very well known extensions breaking sites in the weirdest ways.