Netlify Form Not Appearing in Site Settings Menu

Here is the code for the form in my Svelte.js app:

<form name="Interested Buyer" method="POST" data-netlify="true" netlify>
		<p>
			<label>Name <input type="text" name="name" /></label>
		</p>
		<p>
			<label>Email <input type="email" name="email" /></label>
		</p>
		<p>
			<label>Message <textarea name="message"></textarea></label>
		</p>
		<p>
			<button type="submit">Send</button>
		</p>
	</form>

The buiild is published on Netlify. I am getting no errors. However, in Netlify → Site Settings → Forms there is no form names showing.

I have forms working on another site (that one is Gatsby) hosted on Netlify. So, I am not sure what I am doing wrong or what I missed. Any pointers?

https://app.netlify.com/sites/romantic-kowalevski-beb878

Not sure if this is the cause, but you have added both the attributes. Just one of them is needed.

1 Like
	<form name="Interested Buyer" method="POST" data-netlify="true" id="contact">
		<p>
			<label>Name <input type="text" name="name" /></label>
		</p>
		<p>
			<label>Email <input type="email" name="email" /></label>
		</p>
		<p>
			<label>Message <textarea name="message">Enter your message here...</textarea></label>
		</p>
		<p>
			<button type="submit">Send</button>
		</p>
	</form>

Good catch @hrishikesh However, as you can see above I fixed that but the form name is still not showing up in Netlify → Forms | Site settings

Oh, I should have checked your website before adding my previous reply. I just checked the source code and found this:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>

	<title>V.W. Type Two</title>

	<link rel='icon' type='image/png' href='/favicon.png'>
 	<link rel='stylesheet' href='/global.css'>
	<link rel='stylesheet' href='/build/bundle.css'>

	<script defer src='/build/bundle.js'></script>
	<link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />

</head>

<body>
</body>
</html>

As you can see, your <body> is empty. Your page is being rendered using JavaScript. It’s not possible for Netlify Forms to work with that. You’d need to have a html file with the form code somewhere on the website. You can also create a form.html, add the form code to it and add it to your deploy. Netlify forms need the form code to exist somewhere and then they can work for any form with the same name.

There’s more documentation on working with forms rendered using JavaScript: Forms setup | Netlify Docs

2 Likes

Interesting, I was not aware of this. Thank you for pointing it out. I created a form.html in my public folder but now I am getting a 404 page not found error when submitting the form…

There is no netlify (or data-netlify = true) attribute on the form in form.html.

1 Like

Where are you seeing that? In my repo both the form.html and app.svelte have the netlify-data=true attribute…

Okay yeah, seems like Netlify was able to detect the form and it stripped those attributes. This means Netlify was able to see the form and process it. It’s strange that it still leads to 404.

As I can see, the form at form.html submits perfectly. I think you’d also have to add <input type='hidden' name='form-name' value='Interested Buyer' /> to your actual form on the home page. It’s because Netlify bots are not processing this form and thus, this input is missing.

1 Like

Alright I added the <input /> you suggested.

Here is what I have in the App.svelte file:

	<form name="Interested Buyer" method="POST" data-netlify="true" id="contact">
	<input type="hidden" name="form-name" value="Interested Buyer" />
		<p>
			<label>Name <input type="text" name="name" /></label>
		</p>
		<p>
			<label>Email <input type="email" name="email" /></label>
		</p>
		<p>
			<label>Message <textarea name="message">Enter your message here...</textarea></label>
		</p>
		<p>
			<button type="submit">Send</button>
		</p>
	</form>

I am no longer getting the 404 error. Thank you very much for walking me through this. I appreciate it :sunny:

1 Like