405 when using Netlify forms

[yukixctuki]

I created a new themes/hexo/LayoutContact page on which I am trying to use Netlify forms, I've followed Netlify's documentation for forms but I am not able to send(submit the form), it throws 405 | Method not allowed error. I am not sure how to proceed with this. I am a beginner and would appreciate your help.

The /pages/contact.js looks like:

import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import * as ThemeMap from '@/themes'
import { useGlobal } from '@/lib/global'

/**
 * Contact
 * @param {*} props
 * @returns
 */
const Contact = props => {
  const { theme, siteInfo } = useGlobal()
  const ThemeComponents = ThemeMap[theme]
  const meta = {
    title: `${props?.siteInfo?.title} | Contact Us`,
    image: siteInfo?.pageCover
  }
  return <ThemeComponents.LayoutContact {...props} meta={meta} />
}

export async function getStaticProps() {
  const props = (await getGlobalNotionData({ from: 'Contact' })) || {}
  return { props }
}

export default Contact

The /themes/hexo/LayoutContact.js looks like:

import LayoutBase from './LayoutBase'

export const LayoutContact = props => {
  return (
    <LayoutBase {...props}>
                <form
                  name="contact"
                  method="POST"
                  data-netlify="true"
                  className="space-y-4"
                  action="/"
                >
      ...
    </LayoutBase>

相应配置

https://exmuslims.in

截图

环境

• Windows
• Chrome browser

Thanks for making this amazing generator.

[tangly1024]

Hi there.

Glad you like the tool, I really like your netlify theme and am looking forward to you submitting it to the main branch of NotionNext.

Obviously, your main problem is in this code.

<form
  name="contact"
  method="POST"
  data-netlify="true"
  className="space-y-4"
  action="/"
>

method="POST" , action="/"

It means that requesting your "/" page with a POST request, (which is the home page https://exmuslims.in), but the home page is apparently only supported to be accessed with GET, so it returns a 405 error.

What is the HTTP request method, this link gives an explanation：

https://www.w3schools.com/tags/ref_httpmethods.asp

You can refer to the steps in this link and try to create a page for receiving user submissions, but it's somewhat difficult

https://newdevzone.com/posts/how-to-handle-a-post-request-in-nextjs

[yukixctuki]

Thank you for your kind words <3

As per Netlify's documentation on forms the for doesn't require action attribute and after reading a little it seemed like a really dumb mistake from my part.

I have used Netlify forms in Gatsby & Nextjs static site before and it worked out of the box.

I've removed the action attribute and tested but it this time it says Bad request, missing form

I'll see if can make use of the links you provided.

Many thanks!

[yukixctuki]

About submitting the theme 😅 I'll definitely clean up the code and try to make a PR. I know I should be respecting the license and I am keen about releasing the source code, I just have to clean up a little :)