Netlify Forms in Next.js 14 App Router

I can’t get Netlify Forms to work on my website. I can’t even get the Netlify UI to find any form when deploying.

I have a client component with the form in it:

"use client";

import styles from "./page.module.css";

const Contact = ({ params: { locale } }) => {
  const handleSubmit = (e) => {
    e.preventDefault();

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

    const data = {
      name: e.target.name.value,
      email: e.target.email.value,
      phone: e.target.phone.value,
      message: e.target.message.value,
    };

    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contact-form", ...data }),
    })
      .then(() => alert("Success!"))
      .catch((error) => alert(error));
  };

  return (
          <form className={styles.form} name="contact" data-netlify="true" onSubmit={handleSubmit}>
            <input type="hidden" name="form-name" value="contact" />
            <input type="text" name="name" required placeholder={localizedContent.name} />
            <input type="email" name="email" required placeholder={localizedContent.email} />
            <input type="number" name="phone" required placeholder={localizedContent.phone} />
            <textarea name="message" required placeholder={localizedContent.message} />
            <input type="submit" value={localizedContent.send} />
          </form>
  );
};

export default Contact;

But this doesn’t seem to do the job.
I’ve tried to add a form.html in the public folder, although I’m not sure this can solve it:

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

And I’ve also tried to add the same hidden form in the main Layout.js of the app.
Could someone point me in the right direction? Thanks!

@marnau Can you provide a link to the site?

It may not matter, but the HTML form you’ve indicated is in your Layout.js doesn’t contain a submit button, the one in the Netlify documentation does:

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