Cloudflare pages function is not working with a static site

I am facing some issues while deploying pages function on cloudflare.
I have made a simple website with HTML, TailwindCSS, JS and then deployed it on cloudflare pages with custom domain connected via github repo directly. It had been working perfectly, no issues there.

But then I needed to add a contact form and receive the form data as a mail notification, I researched for a solution and started following this guide: https://sia.codes/posts/migrating-netlify-to-cloudflare/#setting-up-email-with-resend
My setup is almost the same with some minor differences.

My setup at remote cloudflare project settings is, I have added my env variables as secrets there and npm run build as a build command and dist/ as a build directory, I have
package.json
in my project for including dependencies.

Now the issues I am facing is, when I submit the form data and it goes to: mysite.com/api/submit-contact-form

It gives me this response:
"This page isn’t working
If the problem continues, contact the site owner.
HTTP ERROR 405"
sia.codes
How I migrated my static site from Netlify to Cloudflare including setting up Functions to handle contact form requests
Was this page helpful?