Home
Support Forums

Netlify not detecting form copied from the docs

Hi, I’m deploying a Next.js site and have a form that is not being detected. I think the issue may be related to the build process because I’ve tested several different versions of the HTML including one directly copied from the docs and one from another (Gatsby) site that works.

Here’s the site: Contact Us | Athlete Guru. The site uses the nextjs plugin.

Below is the HTML for the form from a Netlify blog post (Add a Netlify-powered contact form to your Next.js site):

<form name="contact" action="/contact-success" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="contact" />
  <p>
    <label htmlFor="yourname">Your Name:</label>
    <input type="text" name="name" id="yourname" />
  </p>
  <p>
    <label htmlFor="youremail">Your Email: </label>{" "}
    <input type="email" name="email" id="youremail" />
  </p>
  <p>
    <label htmlFor="yourmessage">Message: </label>
    <textarea name="message" id="yourmessage"></textarea>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

Here’s the original form I tried which was detected but didn’t receive submissions:

<form
  name="contact-us"
  method="POST"
  data-netlify="true"
  action="/contact-success"
  className="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8">
  <input type="hidden" name="form-name" value="contact-us" />
  <label htmlFor="first_name" className="label">
    First name
    <input
      type="text"
      name="first_name"
      id="first_name"
      autoComplete="given-name"
      className="input"
      required={true}
    />
  </label>
  <label htmlFor="last_name" className="label">
    Last name
    <input
      type="text"
      name="last_name"
      id="last_name"
      autoComplete="family-name"
      className="input"
      required={true}
    />
  </label>
  <label htmlFor="email" className="label sm:col-span-1">
    Email
    <input
      name="email"
      type="email"
      id="email"
      autoComplete="email"
      className="input"
      required={true}
    />
  </label>
  <label htmlFor="phone_number" className="label sm:col-span-1">
    Phone Number (Optional)
    <input
      type="text"
      name="phone_number"
      id="phone_number"
      autoComplete="tel"
      className="input"
    />
  </label>
  <label htmlFor="subject" className="label sm:col-span-2">
    Subject
    <input type="text" name="subject" id="subject" className="input" required={true} />
  </label>
  <label htmlFor="message" className="label sm:col-span-2">
    Message
    <textarea name="message" id="message" rows={4} className="input" required={true} />
  </label>
  <button type="submit" className="btn sm:col-span-2 justify-self-end">
    Submit
  </button>
</form>

Hi @cblindsey3

Copied verbatim the form you linked to into the Next.js project I made watching Next.js from the Ground Up - Jamstack Explorers.

The form is recognised and submission received.

The @netlify/plugin-nextjs@3.4.2 automagically ran during build (I didn’t have to invoke it.) I then see this in the deploy log

12:32:34 PM: Processing form - contact
12:32:34 PM: Detected form fields:
12:32:34 PM:  - firstname
12:32:34 PM:  - name
12:32:34 PM:  - email
12:32:34 PM:  - message

Do you have form processing active on your site? (Under Site settings > Build & Deploy > Post Processing.)

I do have forms enabled.

Could it be related to using ISR for this page?

Not having used ISR, I cannot say for certain.

You might find these of interest though

1 Like

I removed ISR from my contact page, so now it’s a static page and it detected both forms (one from the docs and my form). Not receiving submissions yet, but it’s clear ISR doesn’t work with it.

1 Like

At the moment your site’s dashboard shows there are no forms at all. Has something changed?

I deleted them and am planning on using another service for the contact form. I’m guessing there’s something weird with my build process or Next/Netlify that is breaking it.

That’s rather strange. It does work in most cases.

Do let us know if you wish to revert to Netlify forms and are stuck at getting it to work.

Thanks, I appreciate the help. I’ve really enjoyed Netlify forms in the past, not sure why it’s not working now (even copying a working form from another site didn’t work). For now, I’ll go with another service to get it up and running quickly.

Hi, I’m giving this a shot again since going with another provider would require some additional work for my client.

It looks like the ‘Contact’ form was processed correctly but is still not receiving submissions. The fields are first_name, last_name, email, phone_number, subject, and message. The netlify data attribute has been removed. I’m using a button of type submit. Full source below:

<form
  name="contact"
  method="POST"
  data-netlify="true"
  action="/contact-success"
  className="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8">
  <input type="hidden" name="form-name" value="contact" />
  <label htmlFor="first_name" className="label">
    First name
    <input
      type="text"
      name="first_name"
      id="first_name"
      autoComplete="given-name"
      className="input"
      required={true}
    />
  </label>
  <label htmlFor="last_name" className="label">
    Last name
    <input
      type="text"
      name="last_name"
      id="last_name"
      autoComplete="family-name"
      className="input"
      required={true}
    />
  </label>
  <label htmlFor="email" className="label sm:col-span-1">
    Email
    <input
      name="email"
      type="email"
      id="email"
      autoComplete="email"
      className="input"
      required={true}
    />
  </label>
  <label htmlFor="phone_number" className="label sm:col-span-1">
    Phone Number (Optional)
    <input
      type="text"
      name="phone_number"
      id="phone_number"
      autoComplete="tel"
      className="input"
    />
  </label>
  <label htmlFor="subject" className="label sm:col-span-2">
    Subject
    <input type="text" name="subject" id="subject" className="input" required={true} />
  </label>
  <label htmlFor="message" className="label sm:col-span-2">
    Message
    <textarea name="message" id="message" rows={4} className="input" required={true} />
  </label>
  <button type="submit" className="btn sm:col-span-2 justify-self-end">
    Submit
  </button>
</form>

The syntax looks correct. Is it still active on the same website mentioned before?

Yes, it’s active on https://athleteguru.netlify.app/contact

This is one tough case. I tried the HTMl form generated on your website and published it on another website and it works absolutely fine. I’m running out of explanations for the failure.

Meanwhile, would you be willing to submit forms via serverless functions? I could brew up an example if that’d work for you.

Agreed that it’s odd it’s not working.

I’d totally be happy doing it with a serverless function.

Would you try renaming your form and see if it makes a difference?

Yes, I just redeployed with the form named “contact-us” and another “contact-athlete-guru” which uses a fetch request to submit the form.

Both forms were detected and all of their fields although I am not seeing any of my submission attempts come through.

The data-netlify attribute was not removed from either form.

Hi @cblindsey3,

We were checking this, but it appears you’re not using Netlify Forms anymore. Is that the case?

If you would like for us to be able to get to the bottom of this, it would be great if you could keep another version of your website active where the forms are causing a problem.