Form submissions missing some data inputs - naming mismatch?

Support
, ,
#1

Briefly summarize the issues you have been experiencing.
I have a form on my website, plain jane html, that only seems to capture one of the input fields in the submission. It’s strange and different than the issues I’ve seen in other posts. I do get a submission, so it’s not an issue of the whole thing getting marked as spam, and I don’t see what is different about the one input field that is captured.

Please provide a link to your live site hosted on Netlify.
https://www.sparepad.com/referral (scroll to the bottom)

Here is an example submission:

image
image.png902×286 12.8 KB

image
image.png1179×221 7.15 KB

Here is the form html code:

        <form id="refer-a-friend-form" name="refer-a-friend-form" data-name="Email Form" data-netlify="true" netlify>
          <div class="form-horizontal">
            <div class="label-box"><label for="Full-Name">Full Name</label><input type="text" class="text-field w-input" maxlength="256" name="Full-Name" data-name="Full-Name" id="Full-Name" required="" form="refer-a-friend-form"></div>
            <div class="label-box"><label for="Email">Email Address</label><input type="email" class="text-field w-input" maxlength="256" name="Email" data-name="Email" id="Email" required="" form="refer-a-friend-form"></div>
          </div>
          <div class="form-horizontal grid3">
            <div class="label-box"><label for="Referral-s-Name">Referral&#x27;s Name</label><input type="text" class="text-field w-input" maxlength="256" name="Referral-s-Name" data-name="Referral&#x27;s Name" id="Referral-s-Name" required="" form="refer-a-friend-form"></div>
            <div class="label-box"><label for="Referral-s-Email">Referral&#x27;s Email </label><input type="email" class="text-field w-input" maxlength="256" name="Referral-s-Email" data-name="Referral&#x27;s Email" id="Referral-s-Email" required="" form="refer-a-friend-form"></div>
            <div class="label-box"><label for="Referral-s-Company">Referral&#x27;s Company </label><input type="text" class="text-field w-input" maxlength="256" name="Referral-s-Company" data-name="Referral&#x27;s Company" id="Referral-s-Company" required="" form="refer-a-friend-form"></div>
          </div>
          <div class="label-box">
				<input type="submit" value="Submit Referral" data-wait="Please wait..." class="button w-button">
			 </div>
        </form>

What have you tried as far as troubleshooting goes? Do you have an idea what is causing the problem?

I don’t know :frowning:

#2

Hi there @earthmancash, thanks for writing in. The submission is failing because the input names don’t match. It looks like you have a data-name as well as a name attribute for each of the inputs. While our system is parsing the forms we are using the data-name but your form is submitting using the name. I’m not sure why you have two of these fields, but I recommend removing the data-name attributes.

#3

Thank you @futuregerald for the response! I removed the data-name from the form, both inputs and the overall form object. I still got the same issue, where the “Email” input is filled in but the others are all null.

I was able to fix the issue by renaming my form. I’m guessing that netlify only parses the form field once when it’s first detected, and it didn’t read in the inputs when I changed their name… Then renaming the form would force it to parse the form anew and pick up these fields. So this works:

        <form id="refer-a-friend-form" name="refer-a-friend-form-v2" data-netlify="true" netlify>
          <div class="form-horizontal">
            <div class="label-box"><label for="Full-Name">Full Name</label><input type="text" class="text-field w-input" maxlength="256" name="Full-Name" id="Full-Name" required="" form="refer-a-friend-form"></div>
            <div class="label-box"><label for="Email">Email Address</label><input type="email" class="text-field w-input" maxlength="256" name="Email" id="Email" required="" form="refer-a-friend-form"></div>
          </div>
          <div class="form-horizontal grid3">
            <div class="label-box"><label for="Referral-s-Name">Referral&#x27;s Name</label><input type="text" class="text-field w-input" maxlength="256" name="Referral-s-Name" id="Referral-s-Name" required="" form="refer-a-friend-form"></div>
            <div class="label-box"><label for="Referral-s-Email">Referral&#x27;s Email </label><input type="email" class="text-field w-input" maxlength="256" name="Referral-s-Email" id="Referral-s-Email" required="" form="refer-a-friend-form"></div>
            <div class="label-box"><label for="Referral-s-Company">Referral&#x27;s Company </label><input type="text" class="text-field w-input" maxlength="256" name="Referral-s-Company" id="Referral-s-Company" required="" form="refer-a-friend-form"></div>
          </div>
          <div class="label-box">
				<input type="submit" value="Submit Referral" data-wait="Please wait..." class="button w-button">
			 </div>
        </form>
#4

Hi,

Glad you resolved the issue! We parse the form anytime the html file it’s in changes. Let us know if you have any other questions.