Form works but resets without showing custom alert message

Support
, ,
1

hello,

im working on a site and I am trying to set my contact form up with Netflix forms rather than using a third-party site like static forms. I am specifically trying to create a contact form that can also also handle file uploads/submissions.

I am only testing this on my local server, but from what I can tell, the form works in general (as in the messages send). However, it won’t load the custom alert message. I opted for this rather than have it redirect to a separate success page after a successful submission.

Where am I going wrong? I’m not deploying to netlify yet and I haven’t enabled form submissions.

im using Hugo.

here’s what I have. sorry for any redundancies.

send me something \*, \*::before, \*::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family:; background:; display: flex; justify-content: left; align-items: left; min-height: 100vh; padding: 1.5rem; } .card { background:; border-radius: 12px; box-shadow: ; padding: ; width: 100%; max-width: 980px; } h1 { font-size: 1.5rem; margin-bottom: .5rem; color:} .intro { font-size: .9375rem; color:; margin-bottom: 1.5rem; } h1:last-child, h1:only-child { margin-bottom: 1.5rem; } label { display: block; font-size: .875rem; font-weight: 500; color:; margin-bottom: .25rem; } input, textarea, select { width: 100%; padding: .625rem .75rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: .875rem; margin-bottom: 1rem; color: #111827; background: #fff; } input:focus, textarea:focus, select:focus { outline: none; border-color:; box-shadow: 0 0 0 3px rgba(225,29,72,0.15); } textarea { resize: vertical; } .row { display: flex; gap: 1rem; } .row > div { flex: 1; } .check { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: 1rem; } .check input { width: auto; margin: .15rem 0 0; } .check label { margin-bottom: 0; font-weight: 400; color: #4b5563; } fieldset { border: none; margin-bottom: 1rem; } fieldset > label { margin-bottom: .5rem; } .options { display: flex; flex-direction: column; gap: .5rem; } button { width: relative; padding: .75rem; background: #191819; color: #fff; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; font-size: .875rem; } button:hover { background: #e11d48 }

<for=“name”>name

email

message

attachment (optional)

submit

thank you!

let's try that again.

and here’s the script. I admittedly was just trying a bunch of stuff out here.




const handleSubmit = event => {




const myForm = document.getElementById("formFile");

const successAlert = document.getElementById("form-success");

const errorAlert = document.getElementById("form-error");


event.preventDefault();

const formData = new FormData(myForm);



fetch("/", {

method: "POST",

// headers: { "Content-Type": "application/x-www-form-urlencoded" }, don't use when uploading files with FormData

body: formData

  })

    .then((response) => {

if (response.ok) {

successAlert.style.display = "block";

errorAlert.style.display = "none";

myForm.reset();




      } else {

throw new Error("something's wrong"); 




       }

    })

    .catch((error) => {

errorAlert.style.display = "block";

successAlert.style.display = "none";

console.error("let's try that again:", error);




    });

document.querySelector("formFile").addEventListener("submit", handleSubmit)};