Form is being displayed differently on Netlify and emails than it is inside payload and in HTML

I am working on a new Netlify form and it is not seeming to submit correctly. I have gone through all the docs and seen samples but can’t seem to figure it out.

Website: https://wasatchmaids.netlify.app/careers/house-cleaning-application

In the POST method, I get the correct body, but in the form on Netlify and in the emails, I get a mixed up version of my payload. For example, here is a payload:

form-name: Job Application
first-name: jeremy
last-name: mrsponge
phone: 8888888888
email: example@gmail.com
contactmethod: Phone
address1: 1234 Netlify Rd
address2: 
city: LA
state: CA
zip: 88888
country: United States
working: yes
experience: no
has-internet: yes
has-license: no
has-vehicle: no
working-days: Tuesday
working-days: Wednesday
working-days: Friday
languages: english
submit: 

However, here’s how it looks in Netlify and in the emails:
First Name jeremy
Last Name mrsponge
Phone 8888888888
Email example@gmail.com
Contactmethod Phone
Address1 1234 Netlify Rd
Address2
City LA
State CA
Zip 88888
Country United States
Yes yes
Yes no
Yes yes
Yes no
Yes no
Sunday [“Tuesday”, “Wednesday”, “Friday”]
English english
Other

Specifically the issue seems to start after the “Country”. I’d love to provide the HTML, but it can also be found on the link above. Also, I’m not so sure it’s an html issue if the POST body in the browser network tools is showing more well structured.

Note: as a side-question, can I test sending form submissions somehow without counting to the total submission count?

Hi @mrsponge, thanks for the post.
There is a similar post regarding the same issue where forms do not submit the correct data for radio inputs and select inputs.
Kindly try out @perry’s suggestions to see if it helps solve the problem.

If you are having a hard time figuring out the exact solution from the 3 suggestions, I have narrowed it down to the answers by @Dennis and @laura below since your form uses for attribute in labels for radio inputs.

Also regarding your side-question…

Unfortunately you can’t test forms without it counting to form submissions. Submissions will always count.

A common alternative would be to console log your form data with JavaScript without sending to Netlify on your local development environment. That way you can view the structure of the form data beforehand.

Let me know the outcome after trying out the suggestions. Hope this helps.
Thanks.

1 Like

Thank you very much. Looks like it was indeed a matter of rearranging how I had my labels for the inputs. Instead of separating the inputs and labels like:

<label for="noWorking">No</label>
<input
  type="radio"
   id="noWorking"
   name="working"
   value="Not Working" />

They needed to be grouped together like:

<label>
<input
  type="radio"
   id="noWorking"
   name="working"
   value="Not Working" />
 No</label>

All is fixed now. Thank you again for your help

1 Like

Hi @mrsponge, glad to know the suggestions helped to resolve your problem.