# On Submission, netlify server respond with 404

**URL:** <https://answers.netlify.com/t/on-submission-netlify-server-respond-with-404/71791>\
**Category:** Support\
**Tags:** netlify-forms, nextjs\
**Created:** [July 22, 2022, 5:27am UTC](https://answers.netlify.com/t/on-submission-netlify-server-respond-with-404/71791 "2022-07-22T05:27:32Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![atul](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@atul](https://answers.netlify.com/u/atul)\
**Post date:** [July 22, 2022, 5:27am UTC](https://answers.netlify.com/t/on-submission-netlify-server-respond-with-404/71791/1 "2022-07-22T05:27:32Z")

</div>

I NEED HELP ON THIS

Nextjs Netlify form throw 404 error. I’d tried number of possibilities to make it works but no luck so far.

solutions which I tried,

1. action attr to form 
2. honeypot=“bot-field”

```auto
import React, { useRef, useState } from "react";
import PropTypes from "prop-types";
import { useForm } from "react-hook-form";
import classNames from "classnames";
import Recaptcha from "react-google-recaptcha";

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

const RECAPTCHA_KEY = "";

const FreeDiscussionForm = ({ isHidden, closeModal, name }) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const freeDiscussionForm = useRef(null);
  const buttonName = `free-discussion`;
  const recaptchaRef = useRef(null);
  const [buttonDisabled, setButtonDisabled] = useState(true);

  const onSubmit = data => {
    const payload = {
      ...data,
      formUrl: window.location.href,
    }
    const recaptchaValue = recaptchaRef.current.getValue()
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({
        'g-recaptcha-response': recaptchaValue,
        ...payload,
      }),
    })
      .then(() => {
       console.log("success");
      })
      .catch(error =>
        swal({
          title: "Oops!",
          text: "Something went wrong.",
          icon: "error",
        })
      );
  };

  return (
    <form
      className={classNames("contact-form", {
        hidden: isHidden,
      })}
      data-netlify="true"
      data-netlify-recaptcha="true"
      netlify-honeypot="field-buffer-guard"
      ref={freeDiscussionForm}
      name="contact-form"
      onSubmit={handleSubmit(onSubmit)}
      
    >
      <input
        type="hidden"
        value="contact-form"
        {...register("form-name")}
      />
      <div className="hidden">
        <label>
          Don’t fill this out if you’re human: <input name="field-buffer-guard" />
        </label>
      </div>
      <input
        type="hidden"
        {...register("formUrl")}
        value=""
      />
      {/* Client First Name */}
      <div className="mb-2 p-0">
        <input
          type="text"
          className="form-input"
          placeholder="First Name"
          {...register("clientFirstName", { required: true })}
        />

        {errors.clientFirstName && (
          <span className="text-red-600">Required</span>
        )}
      </div>

      {/* Client Surname */}
      <div className="mb-2 p-0">
        <input
          type="text"
          className="form-input"
          placeholder="Surname"
          {...register("clientSurname", { required: true })}
        />

        {errors.clientSurname && <span className="text-red-600">Required</span>}
      </div>

      {/* Client Phone */}
      <div className="mb-2 p-0">
        <input
          type="text"
          className="form-input mr-2"
          placeholder="Phone"
          {...register("clientPhone", { required: true })}
        />

        {errors.clientPhone && <span className="text-red-600">Required</span>}
      </div>

      {/* Client Email */}
      <div className="mb-2 p-0">
        <input
          type="text"
          className="form-input"
          placeholder="e.g. john@hotmail.com"
          {...register("clientEmail", {
            required: true,
            pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
          })}
        />

        {errors.clientEmail && errors.clientEmail.type === "required" && (
          <span className="text-red-600">Required</span>
        )}

        {errors.clientEmail && errors.clientEmail.type === "pattern" && (
          <span className="text-red-600">Looks like this email is invalid</span>
        )}
      </div>

      {/* Client Message */}
      <div className="form-group mb-3 p-0 pos-rel">
        <textarea
          className="form-input"
          id="clientMessage"
          placeholder="How We Can Help You"
          rows="5"
          {...register("clientMessage", { required: true, minLength: 50 })}
        />

        {errors.clientMessage && errors.clientMessage.type === "required" && (
          <span className="text-red-600">Required</span>
        )}
        {errors.clientMessage &&
          errors.clientMessage.type === "minLength" && (
            <span className="mt-2 text-red-600">
              You must provide at least 50 characters for the details
            </span>
          )}
      </div>
      <div className="w-full mb-2">
        <Recaptcha
          ref={recaptchaRef}
          sitekey={RECAPTCHA_KEY}
          size="normal"
          id="recaptcha-google"
          onChange={() => setButtonDisabled(false)}
        />
      </div>
      <button className={classNames("btn btn-primary w-full", buttonName)} disabled={buttonDisabled}>
        Send
      </button>
    </form>
  );
};

export default FreeDiscussionForm;

```

---

<div class="post-metadata">

**Author:** ![katrina-r](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/katrina-r/32/35890_2.png) [@katrina-r](https://answers.netlify.com/u/katrina-r)\
**Post date:** [July 24, 2022, 3:36am UTC](https://answers.netlify.com/t/on-submission-netlify-server-respond-with-404/71791/2 "2022-07-24T03:36:29Z")

</div>

Thanks for reaching out about this! Sorry that you are having trouble getting your form submissions to work.

[This Support Guide](https://answers.netlify.com/t/support-guide-debugging-support-and-help-for-netlify-forms-start-here/49479) is the first port of call to debug any forms issues. I see that you mention you have read the Docs-- have you also read out Support Guides? If not, please start here and work through these resources!

If you are still encountering obstacles after reading those, please share a link to your live form, your form name as it exists in the UI, your project repo, etc.