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

[clarnx]

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.

@laura

We recommend you don’t use the for attribute in labels for radio inputs. Instead, we recommend something like what Dennis posted above.

@Dennis

Hello, for radio buttons and similar input fields, you could do something like:

<fieldset>
    <legend>Can you attend?</legend>
    <p>
      <label>
        <input type="radio" name="attendance" value="Attending"> Yes
      </label>
    </p>
    <p>
      <label>
        <input type="radio" name="attendance" value="Not Attending"> No
      </label>
    </p>
  </fieldset>

This method should get parsed correctly by our form-handling.

Also regarding your side-question…

@mrsponge

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

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.