I can't see any form submissions

Support
1

I have submitted my form on and my cousin has too on the live site but it doesn’t seem to have been picked up. I can’t see it in submissions. I am not sure what I am doing wrong.

My site is static. The HTML Form element also has the below attributes

name=“contact-form”
enctype=”multipart/form-data”
netlify netlify-honeypot=“bot-field”
data-netlify-recaptcha=“true”

All input fields are labelled correctly with the attribute name included too.

The form is validated using JavaScript and posted following the script in the documentation.

await fetch(url, {
		method: form.method,
		headers: { 
			'Accept': 'application/x-www-form-urlencoded;charset=UTF-8',
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		body: new URLSearchParams(formData).toString()
	})
	.then(setStatusMessage)
	.catch(setStatusMessage)

Not quite sure where I am going wrong, would appreciate some help. The live site is https://lisakimfit.com/

2

I’m seeing some invalid markup, which might or might not be causing the issue, but it’s worth trying: enctype="”multipart/form-data”". Notice the presence of multiple quotes in the attribute.

3

I tried this and still no luck but, thank you for the suggestion!

4

What is the problem exactly? Is the form not detected or are you not receiving submissions?

5

Yes, I am not receiving submissions

6

Could you share your full JavaScript?

As far as I know, fetch is already async and it doesn’t need to be prefixed as such. But a more detailed code as help us check exactly what’s happening.

7 
async function handleSubmit(e: Event) {
	const inputfields = form.querySelectorAll('[data-input') as NodeList;
	const formData: any = new FormData(form);
	const url: string | any = form.getAttribute('action');
	let bodyText;
	let data = [];

	for (var input of inputfields) {
		const field = input as HTMLInputElement
		data.push({ input: field.value })
	}

	if (form.classList.contains('form__newsletter')) {
		bodyText = JSON.stringify(data)
	} else {
		bodyText = new URLSearchParams(formData).toString()
	}

	await fetch(url, {
		method: form.method,
		headers: { 
			'Accept': 'application/x-www-form-urlencoded;charset=UTF-8',
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		body: bodyText
	})
	.then(setStatusMessage)
	.catch(setStatusMessage)

	e.preventDefault();
}

And the HTML looks like ...


<form action="/#data-form-submitted" class="form" data-component="form" method="POST" data-netlify-recaptcha="true" name="contact-form" netlify netlify-honeypot="bot-field">
<div data-fieldset-wrap> <span class="disclaimer"><small>* required field</small></span>
	<fieldset class="form__field" data-fieldset>
		<label for="name"><span class="noError" data-label-text>Full Name* <i class="hide fa-check-circle far" data-field-complete></i></span> <span class="hide" data-field-error><i class="fas fa-exclamation-circle"></i>Please enter a valid name</span></label>
		<input name="name" data-input id="name" noerror placeholder="Full Name" required/>
	</fieldset>
	<fieldset class="form__field" data-fieldset>
		<label for="email"><span class="noError" data-label-text>Email Address* <i class="hide fa-check-circle far" data-field-complete></i></span> <span class="hide" data-field-error><i class="fas fa-exclamation-circle"></i>Please enter a valid email</span></label>
		<input name="email" data-input id="email" noerror placeholder="Email Address" required type="email" />
	</fieldset>
	<fieldset class="form__field" data-fieldset>
		<label for="phone"><span class="noError" data-label-text>Phone Number* <i class="hide fa-check-circle far" data-field-complete></i></span> <span class="hide" data-field-error><i class="fas fa-exclamation-circle"></i>Please enter a valid phone</span></label>
		<input name="phone" data-input id="phone" noerror placeholder="Phone Number" required type="number" />
	</fieldset>
	<fieldset class="form__field" data-fieldset>
		<label for="message"><span class="noError" data-label-text>Your Message* <i class="hide fa-check-circle far" data-field-complete></i></span> <span class="hide" data-field-error><i class="fas fa-exclamation-circle"></i>Please enter a valid message</span></label>
		<textarea data-input id="message" name="message" placeholder="I would like more information on [ choose service ] OR I would like a callback to discuss, please." rows="5"></textarea> 
	</fieldset>
	<fieldset class="form__field">
		<input data-input class="disabled form__field__submit" data-submit-button type="button" value="Send">
	</fieldset>
</div>
8

I’m not sure if this is a typo while typing it here or in your code, but you’ve missed the closing ].

It should be [data-input].

Furthermore, your submit button is of the type ‘button’ instead of ‘submit’. That’s not triggering your Submit event handler.

9

Thank you! I will try this out now. How odd that my task runner didn’t pick up the errors in the JS especially the one without a closing tag. I will let you know shortly!

10

OK. Still no luck with seeing form submissions :confused:

11

It’s because you’ve enabled data-netlify-recaptcha="true" but not added a <div data-netlify-recaptcha="true"></div> inside the form. Read about it here: Spam filters | Netlify Docs Same is true for bot field but I just tested and it doesn’t cause any issues with submission, it just defeats the purpose of using that feature. However, the ReCaptcha is causing problems. I just used your form code on a demo website (didn’t use JavaScript), and got the submissions.

12

Hi, @LisaKim. Did you change the DNS settings? I ask because that site (https://lisakimfit.com/) isn’t hosted at Netlify at this time:

Name server records (type = NS):
lisakimfit.com.		1799	IN	NS	pdns1.registrar-servers.com.
lisakimfit.com.		1799	IN	NS	pdns2.registrar-servers.com.

Records for the apex domain (type = A):
lisakimfit.com.		1798	IN	A	198.54.120.162

Records for www subdomain:
www.lisakimfit.com.	1798	IN	CNAME	lisakimfit.com.
lisakimfit.com.		1798	IN	A	198.54.120.162

Also, you have an inactive Netlify DNS zone for this domain here:

That DNS zone must be deleted or activated. There is more about why and how to do so here:

So, the forms on that page are not being submitted to Netlify because Netlify isn’t the web host for that domain.

​Please let us know if there are other questions about this.

13

I have removed the inactive DNS zone. I didn’t think that I needed to host my site via netlify for the form submissions to work as it is hosted elsewhere. I also didn’t see this in the guides for forms.

14

Hi, @LisaKim. All of our documentation assumes the site is hosted at Netlify.

Much like the menu of a restaurant only applies when eating at that restaurant, our documentation only applies if we host the site (and in your case we do not).

When you make the DNS record that point this domain to the IP address 198.54.120.162, that is where you send all the traffic. When you submit a form, you submit it to 198.54.120.162.

Netlify doesn’t have anything to do with this IP address. We don’t control it and we cannot see the HTTP request that submits the form to it.

So, the form submissions don’t work at Netlify because you don’t send the form submissions to us. This is like addressing a letter to Ada and then wondering why Bobby didn’t get the letter. Bobby didn’t get the letter because you sent it to Ada.

Now, I do see you do have a site at Netlify without a custom domain (using a name similar to something-here-abc123.netlify.app. We can troubleshoot those form submission if you like.

Do you want us to troubleshoot there? If so, would you please confirm the site’s subdomain at Netlify?

If there are any other questions, please reply here anytime.