Name field in form empty in submissions

Support
, ,
1

Hi.

I’ve set up a Netlify app in Gatsby, and my form submission is working fine apparently, except that the “name” field of my form does not register in the submissions despite that i can clearly see that it is submitted in the post request form data in my networks tab.

My app is hosted at this url: https://upbeat-raman-e4e66f.netlify.app/

I’ve gone through the code and the name field has the “name” attribute as described in the docs, just like the two other fields. I don’t understand why it’s not showing in my submissions.

Skjermbilde 2020-05-01 kl. 16.24.03
Skjermbilde 2020-05-01 kl. 16.24.032426×404 26.5 KB

If anyone could help, that would be great.

2

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

This Common Issue is the first port of call to debug any forms issues.

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 your form’s code. :slight_smile:

1 Like
3

Hey, @perry.

Unfortunately I’ve tried to search, but couldn’t find anyone with the same problem. If all fields were empty, i guess it would be different. Also, as I mentioned, I can see that all the fields with the correct data is being sent in the request on submit, so I’m out of ideas tbh. The code on this side seems to work.

Here is the form code:

  						<form 
							name="contact"
							method="post"
							// action="/thanks/"
							data-netlify="true"
							data-netlify-honeypot="bot-field"
							onSubmit={handleSubmit}
							className={styles.form}
						>
							<input type="hidden" name="form-name" value="contact" />
							<p hidden>
								<label>
									Don’t fill this out: <input name="bot-field" onChange={handleChange} />
								</label>
							</p>	
							<input
								className={((displayMsg && errors.customername) ? `${styles.errorBox}` : '')}
								type="text"
								placeholder="Name"
								name="customername"
								value={customername}
								onChange={(event) => handleChange(event)}
							/>
							{displayMsg && <span className={styles.error}>{errors.customername}</span>}
							<input
								className={((displayMsg && errors.email) ? `${styles.errorBox}` : '')}
								type="text"
								placeholder="Email"
								name="email"
								value={email}
								onChange={(event) => handleChange(event)}
							/>
							{displayMsg && <span className={styles.error}>{errors.email}</span>}
							<textarea
								className={((displayMsg && errors.message) ? `${styles.errorBox}` : '')}
								placeholder="Message"
								name="message"
								value={message}
								onChange={(event) => handleChange(event)}
							/>
							{displayMsg && <span className={styles.error}>{errors.message}</span>}
							<button
								disabled={!customername || !email || !message}
							>SEND</button>
							{mailSent === true &&
								<div className={styles.confirmed}>
									<p>Thrilled to hear from you! </p>
									<p>I will get back to you shortly</p>
								</div>
							}
						</form>

Hopefully you can see something I can’t, if not - thanks for the effort anyways.

4

is this from your ssg? if yes, can you show us the html code (without js) you are including in your site please?

5

Hey, Perry. Thanks for the reply.

Yes, that is the form from my Gatsby app. I’m sorry, I’m not sure what you mean by HTML without js?

6

so, as outlined here:

if you are rendering a form with JS through a static site builder such as gatsby, our bots can’t pick it up properly. You need to include a html form in your site where the name and input fields match that gets parsed by our bots at build time so everything works as it should.

7

Thanks a lot.

I had forgotten to include this in my form:

<input type="hidden" name="form-name" value="contact" />

Works perfectly now. :+1: