Fields missing from Forms notification email

[mattcave]

Site: https://rambridge.com

I have a simple contact form on the above site. The form has been working fine for many months. The build process detects the form correctly, the form submits correctly, and all fields from the form submissions show up in the Netlify UI correctly. Recently (not sure exactly when), the automatic notification emails stopped including most of the fields in the email body. What might have changed to cause that?

This is the opening tag for the form to help you find it.

<form class="contact__form" action="/" name="contact-form" novalidate data-netlify="true">

[mattcave]

<form class="contact__form" action="/" name="contact-form" novalidate="novalidate" method="post"><input type="hidden" name="form-name" value="contact-form">
										<fieldset>
											<div class="grid-x grid-margin-x">
												<div class="cell">
													<label for="contact-business-name">
														<input name="contact-business-name" type="text" id="contact-business-name" placeholder="Business Name">
													</label>
												</div>
												<div class="cell">
													<label for="contact-contact-name">
														<input name="contact-contact-name" type="text" id="contact-contact-name" placeholder="* Contact Name" required="">
													</label>
												</div>
												<div class="cell">
													<label for="contact-company-title">
														<input name="contact-company-title" type="text" id="contact-company-title" placeholder="Company Title">
													</label>
												</div>
												<div class="cell small-6">
													<label for="contact-phone">
														<input name="contact-phone" type="text" id="contact-phone" placeholder="Phone">
													</label>
												</div>
												<div class="cell small-6">
													<label for="contact-email">
														<input name="contact-email" type="text" id="contact-email" placeholder="Email">
													</label>
												</div>
							
												<div class="cell">
													<label for="contact-company-website">
														<input name="contact-company-website" type="text" id="contact-company-website" placeholder="Company Website">
													</label>
												</div>
												<div class="cell">
														<label>
															<textarea id="contact-additional-info" name="contact-additional-info" placeholder="If you have anything you would like to ask us while you are here, please let us know."></textarea>
														</label>
													</div>
												<div class="cell auto"></div>
												<div class="cell medium-5">
													<button type="submit" class="button expanded arrow-fw gold text-left submit">Send</button>
												</div>
							
							
											</div>
										</fieldset>
									</form>

[hrishikesh]

Hi @mattcave,

Could you try to change the form name so it registers as a new form and hopefully that would change some stuff?

[mattcave]

@hrishikesh Thanks for the idea. I renamed the form and still get the same result unfortunately.

[mattcave]

I notice that, in the portal, the values are captured but not the field names. ie its got the value of the key/value pair, but not the key.

[mattcave]

Further discovery: It looks like the way I’ve got the input field wrapped inside a label tag is what is causing this issue. Used to work OK, does not now. I guess you’ve changed the way the forms are parsed on your side at some point @hrishikesh ?

Example of what does NOT work (although it used to)

<label for="contact-phone">
  <input name="contact-phone" type="text" id="contact-phone" placeholder="Phone">
</label>

[mattcave]

Aha, I think I see my goof (which Netlify handles a little inelegantly). I was missing the label text, and Netlify doesn’t fall back to using the input name attribute. It just kinda fails.

<label for="contact-phone">!!!MISSING LABEL TEXT!!!
  <input name="contact-phone" type="text" id="contact-phone" placeholder="Phone">
</label>

[hrishikesh]

Hi @mattcave,

Yes, that’s the behaviour and format we recommend with our forms:

How does Netlify Forms determine labels in email notifications?

Hi, @charlie1, we don’t handle ‘for’ attributes for certain fields so I recommend you using labels like so: <label>Name <input name="shipping-name"> </label> Basically wrapping the label element around your input field indicates which input field that label is for.