Incorrect names for form's radio buttons and checkboxes

Support
1

Hi,
Site name: https://anashi.netlify.app
I set up a rather complex custom form on a client’s website. Netlify recognises it and the form is sent successfully, but 3 of my inputs have the wrong “name” property.
For the 2 radio button fields as well as the 1 checkbox field, Netlify’s form UI uses the value from the first < label > element.
I’m sure it has to do with the way I structured these fields but can’t find the right way to do it.

Screenshot 2024-03-20 at 15.20.27
Screenshot 2024-03-20 at 15.20.271370×1466 472 KB

For the radio buttons, the name being used is “< 10,000€”, and for the checkboxes it’s “brand strategy” (both in my Netlify dashboard and in the email notification). I’d like them to be “budget” and “services”.

Thanks a lot for your help,
Morgane

2

Have you checked:

3

Hello, thanks a lot for your answer! The problem is I have a hard time applying my custom styles to that configuration… Styles like these ones only work when my input fields are not nested inside the labels:

/* Hide default radio button */
input[type=“radio”] {
display: none;
}

/* Style the label to create a custom radio button */
input[type=“radio”] + label {
display: block;
padding: 5% 10%;
margin-bottom: 0;
border-bottom: 1px solid white;
cursor: pointer;
}

#form-select-1 input[type=“radio”]:checked + label {
background-color: var(–purple);
}

4

You can add a custom class and style those classes.

5

Thanks for your reply! I do know how custom classes work, but I’ve tried implementing these custom classes on other elements, like paragraphs for example, and it didn’t work. I find that my :checked selector doesn’t work with anything else other than this combination: “input[type=“radio”]:checked + label”.

I have a hard time finding a solution that would correct the problem on Netlify’s side and allow me the style the form as it is styled now.

6

The only other workaround I see is to have the form un-styled in the HTML and the to add the styling as browse time using client-side javascript.

1 Like