File upload form not showing up in Netlify dashboard (Gatsby)

Support
,
1

Hello I have a gatsby website up at https://glacier.thoughtfulhq.com/ or https://ephemeral-pudding-86ac96.netlify.app - the form is on the second stage of /order-page, if you click build my tundra/sequoia, complete order, next… it’s that one.

I’m trying to create a form to upload an image file only - originally I wanted to send this to an api so I could post it to xero but have had a bit of trouble with that so decided this would be simpler in the meantime.

The form section on github is here: GlacierInternational/order-page.js at main · danielballoch/GlacierInternational · GitHub

I’ve followed lot’s of the support forums/guides but I must still be doing something wrong as it’s not showing up in my Netlify dashboard.

Any help or suggestions here would be greatly appreciated!

2

Hello @danielpbdesign , I visited your site and it looks like there are a lot of errors in the Chrome Dev Tools console. Existing errors can cause your form submission not to work properly. The reason why the file upload is not submitting is probably not a Netlify issue since there are some existing errors in your code.

You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.

For instance it seems you added the Google Maps API more than once.
In your Layout.js component you have added the Google Maps API as a script.
Kindly check your code to see where you are adding the Google Maps API more than once.

 <form 
    name="file-upload" 
    method="post" 
    data-netlify="true" 
    data-netlify-honeypot="bot-field"
    netlify
    onSubmit={handleSubmit3} 
>

Your file upload form also has the attributes netlify and data-netlify="true"
You have to use either netlify OR data-netlify="true" NOT both.

 useEffect(()=>{
        async function loadGoogleMaps() {
            // initialize the Google Place Autocomplete widget and bind it to an input element.
            // eslint-disable-next-line
            autoComplete = await googleAutoCompleteSvc.initAutoComplete(address1Ref.current, handleAddressSelect);
        }
        loadGoogleMaps();
    })

Your useEffect function above in your order-page.js file is running on every render. Since you are binding it to an input element, I think it will be appropriate to run it once on the initial render.

Also In your handleSubmit3 function, e.preventDefault() is supposed to be the first line of code before any fetch requests.

Once you fix the errors in the console and in your code, try again to see if it works.
Hope this helps.

3

“Hey clarnx thank you for the reply, I’ve moved e.preventDefault(), am only using netlify attribute and have got rid of all of the errors on a separate deploy to test this. I do have some cookie warnings still but that’s all.

Netlify: https://632bbe11653d090008cd0fcf--ephemeral-pudding-86ac96.netlify.app/
Github: test netlify form with no errors in console · danielballoch/GlacierInternational@c89ab62 · GitHub

Unfortunately I’m still not seeing the form in my Netlify dashboard??
Any ideas what going wrong here or how I can troubleshoot?

Thanks,
Daniel.

4

Hi, @danielpbdesign. We have a support guide for debugging forms here:

If you haven’t found the answer there, the next steps are to send us the following details so our support team can research this:

  1. The URL for your live form as you want visitors to use it
  2. The URL of your deployed html form. In case you have a javascript form, we need to literally be linked to the html version you’ve deployed, as mentioned above (look for “pure javascript form”)
  3. The form name that you’ve set and that shows in our UI
  4. Any errors or logs from the Netlify build logs, dashboard or browser developer console
  5. Description of anything you have tried that did or didn’t help or make things better/worse
2 Likes