No submissions detected by netlify form (Nuxt.js website)

Support
, ,
1

Hello there,
I have an issue with the netlify form, no matter what I try I don’t see submissions.

So what I did was create an html file in the public folder with the form code like in the instruction.
form.html

<!DOCTYPE html>
    <head></head>
    <body>
        <form name="contactForm1" netlify hidden  method="POST">
          <input type="text" name="name" placeholder="Name"  />
          <input type="email" name="email" placeholder="Email"  />
          <input type="text" name="subject" placeholder="Subject" />
          <textarea name="message" placeholder="Message" rows="4" ></textarea>
        </form>
    </body>
</html>

And I have the real form and logic here in a component:

<form name="contactForm1" method="POST" @submit="handleSubmit">
              <input type="hidden" name="form-name" value="contactForm1" />
              <div class="controls row">
                <div class="col-lg-6">
                  <div class="form-group mb-30">
                    <input type="text" name="name" placeholder="Name" required />
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-group mb-30">
                    <input type="email" name="email" placeholder="Email" required />
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-group mb-30">
                    <input type="text" name="subject" placeholder="Subject" />
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-group">
                    <textarea name="message" placeholder="Message" rows="4" required></textarea>
                  </div>
                  <div class="mt-30">
                    <button type="submit" class="butn butn-md butn-bord radius-30">
                      <span class="text">Let's Talk</span>
                    </button>
                  </div>
                </div>
              </div>
            </form>

Submission script:

<script setup>
const handleSubmit = (event) => {
  event.preventDefault();

  const myForm = event.target;
  const formData = new FormData(myForm);

  fetch("/contact-us", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(formData).toString(),
  })
    .then(() => navigateTo('/thank-you'))
    .catch((error) => alert(error));
};
</script>

The submit script runs and redirects successfully, but nothing is showing up in the dashboard (I checked spam as well).

I also tried making this form work with the default submit (no script), same problem.

Link: Geekfolio - Contact

I would appreciate any help.

2

@kosmas Have you checked your build log to see if the form is detected?

It may not be the issue, but I note that your HTML form at /form.html doesn’t have a submit button.

The one that Netlify show in their documentation does:
https://docs.netlify.com/forms/setup/#html-forms

3

Hi @nathanmartin ,
Thank you for your response!
The form is detected, I can see the fields being processed in the build log and I can see the form with 0 submissions in the dashboard.

As for the submit button, I was pretty sure I had it in the form in one of me previous attempts, but just to be safe I tried it again and it’s the same result (The form is not detecting submissions).

4

@kosmas Using the /form.html directly shows success:

image

The nuxt based version of the form is doing the POST to /contact-us, which I’d imagine doesn’t really exist and is being handled by catch all to serve /index.html.

Since you’re doing it via ajax anyway, I’d try doing the POST to /form.

1 Like
5

@nathanmartin Your suggestion works, thanks so much!

For anyone else having this problem, I was origialy following the example in the docs, which posted the form to “/”, but in the example the html file with the form was index.html. I couldn’t do index.html because it would break the site, so I made a form.html file, so instead of posting to “/”, I should have been posting to “/form”.

1 Like