Next.js Discord

Discord Forum

Netlify form

Unanswered
American Fuzzy Lop posted this in #help-forum
Open in Discord
American Fuzzy LopOP
Hi guys, I’m trying to use netlify forms with my Next.js website but it doesn't work, I don’t get how to do it.
Please help!

Here's my code.
<form className='contacts-form' onSubmit={handleSubmit} method='post' name="contact" data-netlify="true">
    <input type="hidden" name="form-name" value="contact" />
    {/* other inputs... */}
    <button type="submit" name="submit">Submit</button>
</form>

  const handleSubmit = (event) => {
    event.preventDefault();
  
    const myForm = event.target;
    const formData = new FormData(myForm);
  
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: new URLSearchParams(formData).toString(),
    })
      .then(() => router.push("/thank-you"))
      .catch((error) => alert(error));
  };

3 Replies

not-milo.tsx
Nope, people won't do it for you. Show what you did so far and someone will help you solve your problem.
@not-milo.tsx Nope, people won't do it for you. Show what you did so far and someone will help you solve your problem.
American Fuzzy LopOP
Ok! Thanks for your answer! I hadn't seen it from this perspective, sorry. My intention wasn't to have someone do it for me, but to have an example to understand my mistake. Documentation is not clear...
So my form is like this:
<form className='contacts-form' onSubmit={handleSubmit} method='post' name="contact" data-netlify="true">
    <input type="hidden" name="form-name" value="contact" />
    {/* other inputs... */}
    <button type="submit" name="submit">Submit</button>
</form>

Netlify detects the form but doesn't receive any submission
not-milo.tsx
Have you tried handling form submission with a dedicated handler as shown in the [docs](https://docs.netlify.com/forms/setup/#submit-javascript-rendered-forms-with-ajax)?

const handleSubmit = (event) => {
  event.preventDefault();

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

  fetch("/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(formData).toString(),
  })
    .then(() => navigate("/thank-you/"))
    .catch((error) => alert(error));
};