Netlify form stopped working

Support
1

Hi. I stopped receiving submissions suddenly. What could be wrong? On this earlier version i get submissions https://65b29943dd1e140008feec52--capable-longma-e26827.netlify.app/ but not on the newest https://65b7a99078801403fff371fa--capable-longma-e26827.netlify.app/ . I updated the domain for custom, could that be something to do with it? Didnt make any code changes

Here is the code:

const handleSubmit = (event: Event) => {

 const formData = new FormData();

  formData.append("form-name", "contact");
  for (const key of Object.keys(form.value)) {
    formData.append(key, (form.value as any)[key].value);
  }

  fetch("/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(formData as any).toString(),
  })
    .then(() => {
      console.log("Form successfully submitted");
      success.value = true;
    })
    .catch((error) => alert(error));
};

and here is the form:

<form
          v-if="!success"
          name="contact"
          method="POST"
          data-netlify="true"
          netlify-honeypot="bot-field"
          class="grid grid-cols-1 gap-6 md:pt-7 lg:gap-10 lg:pt-10"
          @submit.prevent="handleSubmit"
        >
          <p class="hidden">
            <label>
              Don’t fill this out if you’re human: <input name="bot-field" />
            </label>
          </p>
          <input type="hidden" name="form-name" value="contact" />
          <FormInput
            v-model="form.name.value"
            :invalid-text="form.name.error"
            label="Name"
            name="name"
            placeholder="Your name"
          />
          <FormInput
            v-model="form.email.value"
            :invalid-text="form.email.error"
            label="Email"
            name="email"
            placeholder="Your email"
            type="email"
          />
          <FormInput
            v-model="form.message.value"
            :invalid-text="form.message.error"
            label="Message"
            name="message"
            placeholder="Write your message here..."
            type="textarea"
          />
          <button
            type="submit"
            class="flex justify-center w-full bg-accent-500 rounded-full py-3 text-lg font-semibold leading-[0.66] transition-colors duration-300 hover:bg-accent-600 lg:text-2xl"
          >
            Send
          </button>
2

@aleksiliu Just providing some additional information in case it helps you debug.

There is a minor difference between the form on the page that works, and the one that doesn’t.

Works

image
image923×71 26.2 KB

Doesn’t work

image
image1353×71 33.6 KB

The Forms setup documentation mentions:

When Netlify parses the static HTML for a form you’ve added, the build system automatically strips the data-netlify="true" or netlify attribute from the <form> tag and injects a hidden input named form-name . In the resulting HTML that’s deployed, the data-netlify="true" or netlify attribute is gone, and the hidden form-name input’s value matches the name attribute of <form> like this:

So I’d expect the data-netlify value to be gone if the form had been detected.

But I also note the form is vue based, is there another entirely static html version of the form too?