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?
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…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<form name="Interested Buyer" method="POST" data-netlify="true">
<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>
show original
<script>
export let bus;
export let name;
let sunsetPhoto = '/familyPhotoSunset.jpeg'
</script>
<main>
<h1>{bus}</h1>
<img id="splash" src={sunsetPhoto} alt="Family sunset" >
<h2>Asking <del>$10,500</del> SOLD!</h2>
<hr />
<div id="bio">
<p>I purchased {name} in 2004 and for many years she was my faithful daily driver.</p>
<p>During our younger years I spent a wonderful and glorious summer living the "van-life" while I traveled the great American West as a rock climbing guide in California's majestic Sierra Nevada and Utah's incomparable Wasatch Mountains. Donna was waiting for me when I came home from fighting the war on terror in Afghanistan. My wife and I have taken her on some awesome adventures.</p>
<p>It is with deep sense of sadness that I have decided that it is best to let Donna move on to a new home. My family is getting ready to move again and bringing Donna with us would be quite difficult and expensive.</p>
<p>I do not want to bring her with us just to watch her slowly rust away; a home for weeds, spiders, and mice nests. She deserves better than that. However, there is always a silver lining to every cloud - my lose is <strong>your</strong> gain. Take a look at the photos and if you are interested in scheduling a viewing please contact me using the contact form below.</p>
show original
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
1 Like
