Netlify forms not recognising our forms

Support
,
1

Hi, we’re having problems with our Netlify forms.

domain: https://www.backstory.ink

  • 3 forms on our landing page (contact, contact1, contact2)
  • 1 form showing in our Netlify Forms UI (contact)
  • None of the forms submit, they just refresh the page
  • All forms have the “data-netlify=‘true’” attribute
  • In the browser HTML inspector all forms still have the data-netlify attribute and there is no ‘form-name’ input.

Our build log looks like this:

11:51:56 AM: Netlify Build                                                 
11:51:56 AM: ────────────────────────────────────────────────────────────────
11:51:56 AM: ​
11:51:56 AM: ❯ Version
11:51:56 AM:   @netlify/build 29.41.1
11:51:56 AM: ​
11:51:56 AM: ❯ Flags
11:51:56 AM:   baseRelDir: true
11:51:56 AM:   buildId: 6630cd2e46103c000868392c
11:51:56 AM:   deployId: 6630cd2e46103c000868392e
11:51:56 AM: ​
11:51:56 AM: ❯ Current directory
11:51:56 AM:   /opt/build/repo
11:51:56 AM: ​
11:51:56 AM: ❯ Config file
11:51:56 AM:   No config file was defined: using default values.
11:51:56 AM: ​
11:51:56 AM: ❯ Context
11:51:56 AM:   production
11:51:56 AM: ​
11:51:56 AM: ❯ Using Next.js Runtime - v5.1.2
11:51:57 AM: ​
11:51:57 AM: @netlify/plugin-nextjs (onPreBuild event)                     
11:51:57 AM: ────────────────────────────────────────────────────────────────
11:51:57 AM: ​
11:51:57 AM: Next.js cache restored
11:51:57 AM: ​
11:51:57 AM: (@netlify/plugin-nextjs onPreBuild completed in 102ms)
11:51:57 AM: ​
11:51:57 AM: Build command from Netlify app                                
11:51:57 AM: ────────────────────────────────────────────────────────────────
11:51:57 AM: ​
11:51:57 AM: $ npm run build
11:51:57 AM: > backstory-website@0.1.0 build
11:51:57 AM: > next build
11:51:58 AM:    ▲ Next.js 14.0.4
11:51:58 AM:    Creating an optimized production build ...
11:52:00 AM:  ✓ Compiled successfully
11:52:00 AM:    Linting and checking validity of types ...
11:52:02 AM:    Collecting page data ...
11:52:03 AM:    Generating static pages (0/7) ...
11:52:03 AM:    Generating static pages (1/7)
11:52:03 AM:    Generating static pages (3/7)
11:52:03 AM:    Generating static pages (5/7)
11:52:03 AM:  ✓ Generating static pages (7/7)
11:52:04 AM:    Finalizing page optimization ...
11:52:04 AM:    Collecting build traces ...
11:52:14 AM: Route (app)                              Size     First Load JS
11:52:14 AM: ┌ ○ /                                    3.52 kB        96.5 kB
11:52:14 AM: ├ ○ /_not-found                          0 B                0 B
11:52:14 AM: ├ ○ /login                               1.17 kB        94.1 kB
11:52:14 AM: └ ○ /register                            1.17 kB        94.1 kB
11:52:14 AM: + First Load JS shared by all            81.9 kB
11:52:14 AM:   ├ chunks/938-ae3b98e17d2c2d59.js       26.7 kB
11:52:14 AM:   ├ chunks/fd9d1056-e2c7d479a52b4888.js  53.3 kB
11:52:14 AM:   ├ chunks/main-app-99645ed85d33f049.js  220 B
11:52:14 AM:   └ chunks/webpack-61b1c0453d0b39d5.js   1.68 kB
11:52:14 AM: ○  (Static)  prerendered as static content
11:52:14 AM: ​
11:52:14 AM: (build.command completed in 17.1s)
11:52:14 AM: ​
11:52:14 AM: @netlify/plugin-nextjs (onBuild event)                        
11:52:14 AM: ────────────────────────────────────────────────────────────────
11:52:14 AM: ​
11:52:14 AM: Next.js cache saved
11:52:15 AM: ​
11:52:15 AM: (@netlify/plugin-nextjs onBuild completed in 601ms)
11:52:15 AM: ​
11:52:15 AM: Functions bundling                                            
11:52:15 AM: ────────────────────────────────────────────────────────────────
11:52:15 AM: ​
11:52:15 AM: Packaging Functions from .netlify/functions-internal directory:
11:52:15 AM:  - ___netlify-server-handler/___netlify-server-handler.mjs
11:52:15 AM: ​
11:52:16 AM: ​
11:52:16 AM: (Functions bundling completed in 1.1s)
11:52:16 AM: ​
11:52:16 AM: Edge Functions bundling                                       
11:52:16 AM: ────────────────────────────────────────────────────────────────
11:52:16 AM: ​
11:52:16 AM: ​
11:52:16 AM: (Edge Functions bundling completed in 285ms)
11:52:16 AM: ​
11:52:16 AM: @netlify/plugin-nextjs (onPostBuild event)                    
11:52:16 AM: ────────────────────────────────────────────────────────────────
11:52:16 AM: ​
11:52:16 AM: ​
11:52:16 AM: (@netlify/plugin-nextjs onPostBuild completed in 5ms)
11:52:16 AM: ​
11:52:16 AM: Uploading blobs to deploy store                               
11:52:16 AM: ────────────────────────────────────────────────────────────────
11:52:16 AM: ​
11:52:16 AM: Uploading 7 blobs to deploy store...
11:52:17 AM: Done uploading blobs to deploy store.
11:52:17 AM: ​
11:52:17 AM: (Uploading blobs completed in 190ms)
11:52:17 AM: ​
11:52:28 AM: (Netlify Build completed in 32.2s)
11:52:29 AM: Section completed: building
11:52:39 AM: Finished processing build request in 1m0.287s

Our form markup looks like the following:

<form
            name="contact"
            method="post"
            data-netlify="true"
            className="grid place-items-center"
          >
            
            <div className="flex flex-col md:flex-row gap-4">
              <input
                className="h-12 min-w-[12rem] rounded-lg border-emerald-500 indent-4 text-emerald-900 shadow-lg focus:outline-none focus:ring focus:ring-emerald-600"
                id="email"
                name="email"
                type="email"
                autoComplete="email"
                placeholder="Email"
              />
              <select
                className="h-12 min-w-[12rem] rounded-lg border-emerald-500 indent-4 text-emerald-900 shadow-lg focus:outline-none focus:ring focus:ring-emerald-600"
                id="preference"
                name="preference"
              >
                <option value="">Interest</option>
                <option value="manager">World Manager</option>
                <option value="author">Author</option>
                <option value="builder">Builder</option>
                <option value="editor">Editor</option>
              </select>
              <button
                className="h-12 min-w-[8rem] rounded-lg border-2 border-emerald-600 bg-emerald-500 text-emerald-50 shadow-lg hover:bg-emerald-600 focus:outline-none focus:ring focus:ring-emerald-600"
                type="submit"
              >
                Add Me!
              </button>
            </div>
          </form>

Any help would be greatly appreciated.

2

Have you enabled form detection?

1 Like
3

Yes form detection is enabled. I’ve also tried disabling it and reenabling it to see if that would work, but unfortunately not.

4

Did you redeploy after enabling form detection?

I also see you are using Next.js. Have you read the Work with JavaScript-rendered forms section of the documentation?

1 Like
5

Yes we redeployed after enabling form detection.

Thanks for the link to JS-rendered forms, we will look at that and see if it solves our problem.

6

Hi @Quest037,

Thanks for reaching out!

Along with the information @dig provided, there’s also this information from our docs:

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

Also, I do have a working Netlify Form with Next.js and the new runtime here:

MelvinPeepers/v5_next_form: Next.js site with a Netlify form and v5 (github.com)

The relevant pages are:

v5_next_form/src/pages/index.js at main · MelvinPeepers/v5_next_form (github.com)

and the hidden form:

v5_next_form/public/hidden-form.html at main · MelvinPeepers/v5_next_form (github.com)

Let us know if you still have issues. Thanks!

1 Like
7

Hi @Melvin, thanks for the info. I’ll pass it onto our development team and see what they can come up with. It looks like the change in Nextjs versioning has caused us the problem, as we did have it working before.

@dig thanks for helping out as well.

8

Just to finish this thread, we solved the problem by taking our Nextjs app off SSR and just used client-side rendering.

1 Like