Netlify form submission yeld 404 with AJAX

I’m trying to use Netlify forms with NextJS and React-hook-forms, to avoid the code swapping during build, I’ve figured that just sending an AJAX request would be the easier way to implement it, but when submitting I’m getting a 404. Below is my code:

The submit function

  const onSubmit = async (data: IWaitListForm) => {
    const value = new URLSearchParams({,
      "form-name": "waitlist",
      "netlify-honeypot": "age",
    const result = await fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: value,

The form:

          <form onSubmit={handleSubmit(onSubmit)}>
              {...register("name", { required: true })}
              label="Your name"
              status={ ? "error" : "default"}
              {...register("email", { required: true })}
              label="Your email"
              status={ ? "error" : "default"}
            <div style={{ display: "none" }}>
                label="Your Age"
                status={ ? "error" : "default"}
            <Button type="submit">Join the waitlist</Button>

And that’s basically what’s in that page for now. Any ideas why this could be failing?

Thanks in advance!

hi there, did you read this guide already?

No, I couldn’t get it to work, then I implement without Netlify forms.

:wave: @mschunke ,
Sorry to hear that.

Let us know if you’d still like help with implementation! :slight_smile: