Function not found... Netlify Forms using Nuxt3

I’m trying to use Netlify forms, but i’m getting “Function not found…” when i try to submit it.

image

The url is redirected to the page assigned in “action”, but blank with this message.

How do i correct this ?

Form code:

  <form method="POST" id="form" class="needs-validation text-left" name="cadastro-final" action="/payment"
    data-netlify="true" netlify netlify-honeypot="mandatory-field" data-netlify-recaptcha="true">
    <p class="hidden">
      <label>
        This is mandatory: <input name="mandatory-field" />
      </label>
    </p>
    <input type="hidden" name="form-name" value="cadastro-final" />
    <div class="grid md:grid-cols-2 gap-1">
      <div class="mb-5">
        <label for="pet-name" class="font-bold">Nome Completo</label>
        <input type="text" required
          name="pet-name" />
      </div>
      <div>
      </div>
    </div>
    <div class="grid md:grid-cols-2 gap-4">
    </div>
    <div class="flex justify-center items-center w-full mb-5">
      <div data-netlify-recaptcha="true"></div>
    </div>
    <button type="submit" size="lg" styleName="red" block>Enviar dados</button>
  </form>

I have declared the route that renders the form to be prerendered in nuxt.config.ts:

 routeRules: {
    '/contact': { prerender: true },
}

I get this error in the console, it says /payment has no submission function, but the form is in /contact and submited trough Netlify default submission.

image

You can’t submit a form to a route/path that does not exist. Is the /payment route/path real (i.e. has actual content or a function on that path)?

And please tell me this is a test and you are not trying to capture user payment details (e.g. credit cards) using Netlify Forms.

/payment exists, if i hit F5 after the failed redirection from Netlify Form, it renders the page fine.

I’m not geting payment info from the Netlify Form, only some information not related with payment. After user types the information i need, it gets redirected to the /payment, where in fact it will type payment details.

What im trying to achieve is that the client gets redirected to /payment, as described here Forms setup | Netlify Docs

I forgot to mention, the “Function not found…” appears in local env, in production it just refreshes the form.

It doesn’t exist. The path must exist as an actual file/function not a rendered path (e.g. SSR or client-side rendering as done in an SPA like Nuxt.)

Thanks! I never thought it was about it, and didn’t see any mention in the docs. I will use a custom function to the redirect.

Just made made my sunday! God bless!

It would appear this information is not mentioned in the forms documentation. There is mention of ensuring a path exists in the Form troubleshooting tips → Custom success page which is relevant in this instance as by setting the action you are in effect doing this.

Something to look at @Kristen?

This thread has nothing to do with Netlify Forms. This is intended behaviour of the CLI that if we receive a POST request and if your application’s server sends a 404, we try to match it to a form-submission handler. The Function not found is coming from there, but the actual problem is that the app’s server is sending a 404 for a POST request.

I don’t agree with this being a documentation problem at the moment.

Righto. Then Kristen can ignore my previous post.