Netlify not detecting form copied from the docs

cblindsey3 · July 3, 2021, 2:03am

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: https://athleteguru.netlify.app/contact. 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>

coelmay · July 3, 2021, 2:45am

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.)

cblindsey3 · July 3, 2021, 3:04am

I do have forms enabled.

Could it be related to using ISR for this page?

coelmay · July 3, 2021, 3:18am

Not having used ISR, I cannot say for certain.

You might find these of interest though

cblindsey3 · July 4, 2021, 7:31pm

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.

hrishikesh · July 6, 2021, 2:32pm

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

cblindsey3 · July 6, 2021, 2:44pm

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.

hrishikesh · July 6, 2021, 3:02pm

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.

cblindsey3 · July 6, 2021, 3:13pm

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.

cblindsey3 · July 8, 2021, 9:01pm

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>

hrishikesh · July 9, 2021, 5:54am

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

cblindsey3 · July 9, 2021, 10:00am

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

hrishikesh · July 9, 2021, 12:55pm

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.

cblindsey3 · July 9, 2021, 1:08pm

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

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

hrishikesh · July 9, 2021, 5:12pm

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

cblindsey3 · July 9, 2021, 8:22pm

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.

hrishikesh · July 15, 2021, 6:41am

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.

Topic		Replies	Views
Netlify Forms not being detected Support deployment , netlify-forms , netlify-newbie , branch-deploys , nextjs	7	1592	April 25, 2022
Form Detection Not Working (Next.js SSR Mode) Support netlify-forms	4	1683	November 6, 2022
Forms not working with my NextJS application Support netlify-forms , nextjs	6	1127	March 19, 2024
No form is detected - no submissions are shown Support netlify-forms , nextjs	5	294	April 18, 2024
Forms not being sent with Next.js Support netlify-forms , nextjs	8	6520	June 26, 2022

Netlify not detecting form copied from the docs

Related topics