Issue with Form Submission on Netlify - 404 Not Found for __forms.html

koodori · October 21, 2024, 1:23pm

Dear Netlify Support Team,

I am currently using Next.js v14 and have followed the documentation for “Next.js 13.5+ on Netlify” to build a form on my site. However, when attempting to submit the form, I encounter a 404 Not Found error for the __forms.html file, which causes the submission to fail.

To troubleshoot, I also cloned the repository from Next.js Platform Starter and deployed it to Netlify without making any modifications. Unfortunately, the same error occurs upon form submission.

Here are the details of the issue:

Next.js version: v14
Repository used: Next.js Platform Starter
Documentation followed: Next.js 13.5+ on Netlify
Error: 404 Not Found for __forms.html upon form submission

I have double-checked the documentation and my deployment setup, but the issue persists. Could you please provide guidance on how to resolve this issue, or let me know if there are additional steps needed for setting up form submissions with Next.js on Netlify?

Thank you for your assistance.

Melvin · October 21, 2024, 4:09pm

Hi @koodori,

Thanks for reaching out and welcome to Netlify’s Support Forums!

Could you let us know the sitename (for example, sitename.netlify.app) where you’re seeing submissions reach the 404?

I have a basic Netlify form setup on Next.js 14 (using Netlify/Next.js runtime v5), if you want to compare your form:

JS:

github.com

MelvinPeepers/v5_next_form/blob/main/src/pages/index.js

import Head from "next/head";
import Image from "next/image";
import { Inter } from "next/font/google";
import styles from "@/styles/Home.module.css";
import { useState } from "react";

const inter = Inter({ subsets: ["latin"] });

export default function Home() {
  const encode = (data) => {
    return Object.keys(data)
      .map(
        (key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key])
      )
      .join("&");
  };

  const handleSubmit = (e) => {
    const data = {
      name: e.target.name.value,

This file has been truncated. show original

the hidden form in html:

github.com

MelvinPeepers/v5_next_form/blob/main/public/hidden-form.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hidden form</title>
  </head>
  <body>
    <!-- A little help for the Netlify post-processing bots -->
    <form name="contact-form" netlify hidden>
      <input type="text" name="name" />
      <input type="email" name="email" />
      <textarea name="message"></textarea>
    </form>
  </body>
</html>

Let us know if you have any questions.

koodori · October 22, 2024, 1:36am

Thank you for your response and support!

The form I am currently working on is located at:

I also cloned the repository from https://github.com/netlify-templates/next-platform-starter and deployed it without any modifications here:
Classics | Netlify

I will also try the code you suggested and let you know if I encounter any issues.

By the way, is there any specific configuration required on Netlify for form submissions that I might have missed?

nathanmartin · October 22, 2024, 1:56am

Did you enable Form Detection for the sites?
https://docs.netlify.com/forms/setup/#enable-form-detection

koodori · October 22, 2024, 2:22am

Thank you for the suggestion!
I enabled Form Detection on both sites and redeployed them. After doing so, the form submission worked successfully.
Thanks again for your help!

SamO · October 23, 2024, 3:36pm

glad to hear you were able to get your form working!

Topic		Replies	Views
NextJS returning 404 on form submission Support netlify-forms , nextjs	3	125	June 16, 2024
404 Page Not Found error upon form submission Support netlify-forms	3	2323	December 28, 2022
Next JS Netlify Forms Support netlify-forms , netlify-newbie , nextjs	1	1697	February 15, 2022
How to fix 404 page not found error when i submitted the form Support netlify-forms , redirects , nextjs	8	1165	May 7, 2023
Issue with Next.js 14 Server Actions on Netlify: 404 Error on POST Request Support nextjs	23	3835	March 17, 2024

Issue with Form Submission on Netlify - 404 Not Found for __forms.html

Related topics