POST 405 (Method not Allowed)

Support
,
1

SITE: https://forever-aloe-mk.netlify.app/

Hi there,

I’ve created an ecommerce site with a cart and checkout. Im using React-Hook-Form and Next.js.

While I was running my site locally, and while testing the form submission everything was working correctly. I was getting the data in my console. After building and deployment, When i try and submit my form, I dont get the form in my Forms Tab. In the console it says

POST https://forever-aloe-mk.netlify.app/ 405 (Method Not Allowed)

Im a beginner more of an intern developer.

Here is my form and form submission logic

function encode(data: any) {
  return Object.keys(data)
    .map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
    .join("&");

const ReviewItems = () => {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const { register, handleSubmit } = useForm();

const onSubmit = (data: any) => {
    setIsSubmitting(true);

    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "checkout", ...data }),
    })
      .then(() => {
        setIsSubmitting(false);
        toast.success("Вашата нарачка беше успешно испратена");
      })
      .catch((error) => {
        setIsSubmitting(false);
        console.log("Error", error);
        toast.error("Има проблем при испраќањето на нарачката.");
      });
  };

//code not related with the form 

return ( 
<> 
//code

<Card borderWidth="1px" borderColor="gray.200" shadow="none" mb="2rem">
          <CardHeader>
            <Heading size="md">Информации за испорака</Heading>
          </CardHeader>
          <form
            id="checkout-form"
            onSubmit={handleSubmit(onSubmit)}
            name="checkout"
            data-netlify="true"
            method="POST"
          >
            <input type="hidden" name="form-name" value="checkout" />
            <CardBody>
              <Stack>
                <Box>
                  <FormLabel>Име</FormLabel>
                  <Input
                    {...register("firstName")}
                    type="text"
                    placeholder="Име"
                    focusBorderColor="brand.primaryLight"
                    required
                  />
                </Box>

                <Box>
                  <FormLabel>Презиме</FormLabel>
                  <Input
                    {...register("lastName")}
                    type="text"
                    placeholder="Презиме"
                    focusBorderColor="brand.primaryLight"
                    required
                  />
                </Box>

                <Box>
                  <FormLabel>Адреса</FormLabel>
                  <Input
                    {...register("address")}
                    type="text"
                    placeholder="Адреса"
                    focusBorderColor="brand.primaryLight"
                    required
                  />
                </Box>

                <Box>
                  <FormLabel>Град</FormLabel>
                  <Input
                    {...register("city")}
                    type="text"
                    placeholder="Град"
                    focusBorderColor="brand.primaryLight"
                    required
                  />
                </Box>

                <Box>
                  <FormLabel>Телефон</FormLabel>
                  <Input
                    {...register("phone")}
                    type="number"
                    placeholder="Телефон"
                    focusBorderColor="brand.primaryLight"
                    required
                  />
                </Box>
                {checkout.map((item, index) => (
                  <div key={index}>
                    <input
                      {...register(`items.${index}.name`)}
                      defaultValue={item.name}
                      hidden
                    />
                    <input
                      {...register(`items.${index}.quantity`)}
                      defaultValue={item.count}
                      hidden
                    />
                  </div>
                ))}
              </Stack>
            </CardBody>
          </form>

//code

            <Button
              type="submit"
              form="checkout-form"
              bgColor="brand.primary"
              color="white"
              w="100%"
              rounded="full"
              _hover={{
                bgColor: "brand.primaryDark",
              }}
              _active={{
                bgColor: "brand.primaryDark",
              }}
              isLoading={isSubmitting}
            >
              Нарачај
            </Button>

// My button is outside the form 

</>
}

I dont know what else should i provide you guys with. If anything is missing, please request.

Any help would be appreciated!

Thanks.

2

Reading this:

You might want to refer to: