Unexpected form response

Support
1

First things first, the site name is sabinehugo.netlify.app

On this site I have a form and this form has some radio buttons like these:

<fieldset>
  <label>
    <input name="Salutation" type="radio" value="Mrs">
    Mrs
  </label>
  <label>
    <input name="Salutation" type="radio" value="Mr">
    Mr
  </label>
  <label>
    <input name="Salutation" type="radio" value="Mx">
    Mx
  </label>
</fieldset>

After filling out the form and submit it, selecting e. g. Mr, I would expect a response like Salutation: Mr in the email I get but I get Mrs: Mr.

Is there something I can do to “fix” this?

Thanky you!

2

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. Please start here and work through these resources!

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide more information such as what you have already tried, and a link to your live form. :slight_smile:

3

Hey @stefanfrede

There is (still? @perry could confirm) an issue with the way Netlify forms handles the <fieldset> as first surfaced in this thread and filed as per this post.

A potential “fix” as it were is to handle form processing with client-side JavaScript to determine the salutation value then submit using AJAX.

4

gosh darnit. yes, sadly, that bug is still open. It happens very rarely, so we haven’t been getting much traction to remediate.

stefan, the solution coel suggested is indeed a way around this current circumstance.

1 Like
5

:thinking: I am submitting the form using AJAX and the body I’m submitting is looking fine (when selecting Mr my form data is …&Salutation=Mr&…).

Is it possible to read about how Netlify is processing forms to get a better understanding on how to ship around my problem?

6

Can you share the code you are using to handle the form submission @stefanfrede ?

7

Sure!

https://github.com/sabinehugo189/sabinehugo-relaunch/blob/main/components/c-contact.vue#L158

8

Thanks.

Unfortunately it appears the repository is private.

9

Ugh! Totally missed that. Sorry!

const submit = handleSubmit((_, { resetForm }) => {
  const formData = new FormData(form.value);
  const formName = `form-name=${encodeURIComponent(form.value.name)}`;
  const urlSearchParams = new URLSearchParams(formData).toString();
  const body = formName.concat('&', urlSearchParams);
  fetch('/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body,
  })
    .then(() => {
      notification.value = true;
      return resetForm();
    })
    .catch((error) => console.error('Es ist ein Fehler aufgetreten: ', error));
});
10

When I suggested using some client-side JS, I meant processing the form prior to submitting. I.E. rather than simply passing the form data as an encoded string, you might check/process the values and pass them through as JSON instead.

11

Thank you! I will give it a try.

12

After trying out a couple of things I got the feeling that I didn’t explain my problem very well.

All form values in my form are submitted quite fine.

My problem is with the labels which are used in the email and on Netlify under Verified submissions.

Here is a screenshot:

form_submission
form_submission1170Ă—342 36.5 KB

The label for salutation which is a radio group is wrong.

The label is the value of the first radio button but IMO the label should be the name attribute of the radio group.

I hope this explains it.

And now I try to figure out how I can either fake it or get it done correctly.

13

The issue here then is Anrede is the text in a <h4> and is not associated with the <fieldset> nor with any of the options in the field set.

Try giving the <fieldset> a name attribute and/or add a <legend> tag (see <fieldset> on MDN) as these are what describes the field set.

14

Thank you, but sadly the outcome is still the same:

Screenshot from 2022-05-13 15-07-56

This is now how my simplified markup looks:

<fieldset name="Salutation">
  <legend>
    Salutation
  </legend>
  <label>
    <input name="Salutation" type="radio" value="Mrs">
    Mrs
  </label>
  <label>
    <input name="Salutation" type="radio" value="Mr">
    Mr
  </label>
  <label>
    <input name="Salutation" type="radio" value="Mx">
    Mx
  </label>
</fieldset>

And here is a link to my deploy preview: https://deploy-preview-6--sabinehugo.netlify.app/#contact.

I’m pretty sure I’m not the first one using a radio group with Netlify forms and ask myself if I’m doing something fundamentally wrong :thinking:

–

EDIT

I just build a form with the markup above on another site of mine and it is working fine.

1 Like
15

is it possible you have two forms with the same name? that always causes problems.

1 Like
16

Pardon me for my late reply, but no, I have only one form.

17

What if you deploy the form with a changed name to it re-triggers the form registration?

18

I solved the issue for now by switching back to SSR and supplying a dummy form.

For whatever reason this is working.

19

Bump.

I am having this same issue. Has anyone found a solution to this?

Here is my code in React - Edit fiddle - JSFiddle - Code Playground

20

Could you explain the problem you’re seeing and possibly link us to the form?