NextJS & Netlify Form Debugging

Support
, ,
1

Site: https://silverperkcoffee.com/

Issue: Contact form at the bottom of the site is not generating a network request for submission

I have a working form on a different website using the same stack (NextJS, Netlify) - https://space-precision-systems.netlify.app/ so I’m not sure what I did wrong this time.

Code for contact section:

onst ContactSection = () => {
    return (
      <section className="bg-accent py-8" id="contact">
        <div className="container mx-auto">
          <div className="prose text-center mx-auto my-6">
            <h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-base-100 m-2">
              Connect With Us
            </h2>
          </div>
          <div>
            <form
              className="flex flex-col gap-4 px-4 lg:px-0"
              name="contact"
              action="https://answers.netlify.com/success"
              method="post"
              data-netlify="true"
              id="contact-form"
            >
              <div className="flex flex-col sm:flex-row w-full gap-4 h-28 sm:h-12">
                <label className="input input-bordered flex items-center gap-2 flex-1">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 16 16"
                    fill="currentColor"
                    className="w-4 h-4 opacity-70"
                  >
                    <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
                  </svg>
                  <input
                    type="text"
                    name="name"
                    className="grow"
                    placeholder="Name"
                  />
                </label>
                <label className="input input-bordered flex items-center gap-2 flex-1">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 16 16"
                    fill="currentColor"
                    className="w-4 h-4 opacity-70"
                  >
                    <path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
                    <path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
                  </svg>
                  <input
                    type="text"
                    name="email"
                    className="grow"
                    placeholder="Email"
                  />
                </label>
              </div>
              <select className="select select-bordered" name="event type">
                <option disabled selected>
                  Select Reason for Contact
                </option>
                <option value="events">Events</option>
                <option value="feedback">Feedback</option>
                <option value="general">General</option>
              </select>
              <textarea
                className="textarea textarea-bordered"
                name="message"
                placeholder="Message"
              ></textarea>
              <div netlify-recaptcha></div>
              <input
                name="submit"
                type="submit"
                value="Submit"
                className="btn btn-primary w-full max-w-72 mx-auto"
              />
            </form>
          </div>
        </div>
      </section>
    );
}

export default ContactSection

My understanding was that I don’t need a hidden html form since this is generating a static html site anyhow, right?

2

The Network request when a user submits a form comes from the client browser, so is always going to be related to your own front-end code and largely ‘out-of-scope’ for support here, but I’ll take a quick look and report what I can see.

That’s the case if it really is generating at least one static HTML file that contains the plain form with the appropriate Netlify attributes.

It isn’t the case, even when a site is “static”, if it’s constructed in a way where the form only exists within JavaScript and is injected into the HTML at runtime (some SPA’s [Single Page Application’s] operate like this).

In the case of the silverperkcoffee.com site, you can see that the form exists in the main /index.html page by using the browsers view source feature on the homepage, so it should be picked up…

image
image2233×165 300 KB

Except you’re also using also using Next which is a whole other thing to consider, since factoring in things like SSR it’s entirely possible that page was generated at runtime and didn’t exist when the site was processed by Netlify’s build systems.

A possible indication of this is that the data-netlify="true" attribute is still there, and the documentation very clearly states that is removed when the form is processed:

image
image977×361 115 KB

See:
https://docs.netlify.com/forms/setup/#html-forms

So ultimately, it’s not as “static” as it first appears.

Netlify recently created this to provide a bit of an explanation as to why Forms doesn’t work seamlessly with Next.js

https://nextjs-platform-starter.netlify.app/classics

That page also links to this Next.js starter which has the example files:

https://github.com/netlify-templates/next-platform-starter/blob/main/public/__forms.html
https://github.com/netlify-templates/next-platform-starter/blob/main/components/feedback-form.jsx

3

Thank you so much for breaking that down for me. I think I understand a little better now, and I have a theory. The only difference between the 2 sites I made using the same code for a contact form is that the working website has the contact form as a separate page. That probably means that NextJS generates the html for that page separately from the main index.html file. I’ll investigate this a little more and report back.

I’ll also do a bit of extra reading to try and understand what my best fix for this would be. Not sure if I want a separate contact form, or if I should use a different approach.

Thanks again for the detailed explanation <3

4

@Light The page is making the network request too:

image
image960×214 64.4 KB

So I suspect you meant to say just that the form isn’t being received.

As mentioned there is likely multiple things preventing the form from working, but even if all others were correct, this form still wouldn’t be received by Netlify’s systems because it’s missing the required form-name value.

image

You can read about it here:

https://docs.netlify.com/forms/setup/#submit-javascript-rendered-forms-with-ajax

It actually gets automatically added when Netlify processes basic static HTML forms, but it doesn’t for JavaScript based forms.

5

Could you help me figure out where you are getting this network request? Here is my attempt at making a form submission, but as you can see, I’m not making any requests aside from the 2 images (which should be cached anyhow :man_shrugging:)

I’m not sure what you are referring to regarding the missing form-name as it isn’t something I’ve utilized before.

The link you sent me has the following
<input type="hidden" name="form-name" value="name_of_my_form" />

Apologies for the delay. I was trying to trigger a branch deploy to make this process easier with changes. I was having issues, but I figured it out: https://staging--silverperkcoffee.netlify.app/

I moved the contact form to a seperate page, but it is still not being detected by the Netlify UI

6

screenshot-20240506-145321

screenshot-20240506-145703
screenshot-20240506-1457031600×854 127 KB

screenshot-20240506-145754
screenshot-20240506-1457541306×120 41.7 KB

screenshot-20240506-145830
screenshot-20240506-1458301015×229 72.3 KB

Regarding the form-name the payload that is sent with the POST request must define a form-name which lets Netlify know which form on your site it is.

screenshot-20240506-150107
screenshot-20240506-150107910×252 75.6 KB

Without it Netlify will silently ignore the submission, it’s explained in the documentation.

7

I updated the staging deployment with the following code:

<form
  className="flex flex-col gap-4 px-4 lg:px-0"
  name="contact"
  action="https://answers.netlify.com/success"
  method="post"
  form-name="contact"
  data-netlify="true"
  id="contact-form"
>

but I still don’t see it in the payload:

Edit: I see I did that incorrectly. Trying to follow the docs again, sorry!

8

I added the form-name as shown in the docs, and it is showing up in the payload now, but I’m still not seeing anything on the Netlify dashboard

image
image1247×992 82.1 KB

9

That’s because it’s not your only problem.

If you check the Next.js specific information that I linked you will see that it requires that you POST to a route that is a static file, (so not one being handled by Next.js).

It’s another reason they get you to create a static HTML form file, as it not only aids the detection of the form but gives you a route to submit to for simplicity.

You’ll find your /success route isn’t a static file.

10

Dang, so I wonder why the other website is working :thinking:

Seems I should go over the docs once more without thinking like it should be working as the other site does. Whatever the difference between them, I’ll figure out later.

Apologies for all the back-and-forth due to my ignorance on the subject. Thank you so much for your help. I’ll respond as soon as I have any updates!

11

So I have made some progress, but still having issues so apologies in advance if I missed something else. I promise you I’m really trying my best!

So as you can see at the end, I’m actually getting the form section of Netlify to show it is detecting the form, but I’m still unable to get any submissions to show up.

Still using the staging url: https://staging--silverperkcoffee.netlify.app/

Edit: Sorry, here is the new code for the form.

new __form.html file was added to public.

<html>
    <head></head>
    <body>
        <form name="contact" data-netlify="true" hidden>
            <input type="hidden" name="form-name" value="contact" />
            <input name="name" type="text" />
            <input name="email" type="text" />
            <select name="event">
                <option disabled selected>
                  Select Your Reason for Contact
                </option>
                <option value="events">Events</option>
                <option value="feedback">Feedback</option>
                <option value="general">General</option>
            </select>
            <input name="message" type="text" />
        </form>
    </body>
</html>

and the new tsx code (note that I was having issues with types so I added an ignore just while testing as it was unhappy about it otherwise saying: Argument of type 'FormData' is not assignable to parameter of type 'string | Record<string, string> | string[][] | URLSearchParams | undefined'. Type 'FormData' is missing the following properties from type 'URLSearchParams': size, sort

  const handleSubmit = (event: { preventDefault: () => void; target: any }) => {
    event.preventDefault();

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

    fetch("https://answers.netlify.com/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      // @ts-ignore
      body: new URLSearchParams(formData).toString(),
    })
      .then(() => router.push("/success"))
      .catch((error) => alert(error));
  };
12

@Light That form is posting to /

As your static form file is here:
https://staging–silverperkcoffee.netlify.app/__form.html

You will want to change that to /__form.html

13

image
image1765×408 15.2 KB

I am so sorry I took up so much of your time just because I thought it “should” have worked since it works on another similar sight. As you can see, it is working properly now. Thank you for walking me through this, truly!!!

14

@Light No problem, I’m much the same, in your position I’d now go back and try and confirm precisely why the previous one works, checking things like what version of Next.js and the ‘runtime’ are being used, where it’s posting to, if it’s a static file etc.

15

That’s what I’ve been doing for the past few hours today, but so far I haven’t found the difference. It must be something small that I technically saw and just didn’t register. Planning on chilling for the rest of the evening and hoping that tomorrow it’ll make sense with a refreshed brain haha

Thanks again for being so understanding <3

16

hi @Light,

I apologize if this has already been mentioned. You can also compare your form code with the form mentioned in our Next.js 13.5 docs here:

  • Netlify Forms. If you’re using Netlify Forms, you will need to extract your form definitions to a dedicated static HTML file, and change the form submission to use AJAX rather than full-page navigation. A live demo is available here (see also: source code for the form component and the required static HTML file).
1 Like