Netlify form UI dashboard labels

Support
1

Hello!
I’m facing a strange behavior when sending forms. Currently i’m using Next.JS (which i deploy through Netlify as a static site) and i’m sending forms using fetch().

Here’s my code:

fetch('/', {
  method: 'POST',
  body: formData,
})

i’m getting formData using the following method:

export function encodeNetlifyFormData(data) {
  const formData = new FormData()

  Object.keys(data).forEach(k => {
    formData.append(k, data[k])
  })

  return formData
}

and to the <form /> tag i’ve just added the name attribute.

Everything is working fine (the form is submitted and the data is saved and sended correctly), but the only issue i found here is that in the Netlify Dashboard (and also through the email notification), the values are saved/paired with the label key of the input field.

So for instance, if i have this code:

<div>
  <label>
     MY LABEL
    <input type="email" name="email" />
 </label>
</div>

i will see this:
MY LABEL: xxx@xxx.com

Is there a way to customize the label value? Because in case i use simple labels and input fieds there’s no issue at all, but in the case i use radio buttons, maybe with labels Yes or No, i get this result:
Yes: Yes
which is not useful at all.

The only way i found to customize the labels is by sending the form data by using the following method:

const encode = data => {
  return Object.keys(data)
   .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
   .join("&")
}

but in case i want to upload a file (like a pdf), the file isn’t being uploaded.

Is there a way to handle both cases?

Thanks!

2

hi there! first of all congrats on getting a working form.

i think i understand what the problem is - and wonder if this thread is also describing what you are trying to do:

can you give that a read through and tell us whether that is describing the same issue?

3

Yeah, I posted that issue so that’s exactly the problem I am having. Frankly it has been so slow and such a pain to get support on this that I gave up trying to correct it in the email. I use Zapier to add it to a spreadsheet to avoid the problem entirely.

4

@perry @dalelotts Hi, and thanks for the answer! Yes, that’s exactly the same issue i’m facing. And, as i see, there’s no solution from the Netlify side. I’ll try to workaround the issue by uploading the file to Google Drive or some other service. Is sadly, though, that this kind of issues still exist from Netlify side. Pitty.

Anyway, thanks again!

5

Hi, @Emiliano89, we can take a look at your form to see if there is anything that can be done. Would you please send us links to both the page with the live form and a link to the HTML only form (if a separate form exists for that purpose)?

6

@Emiliano89 Zapier integration will grab the form submitted data and put it in a spreadsheet for you. If it’s a low volume form Zapier is free.