Forms with React are recognized but submits are not captured

Question

I've been using Netlify forms for awhile and love them. This is the first time that I have used them in a react app however, and I am having some trouble getting them to work. I followed the official guide and my form is being recognized and showing in my dashboard, but submitting does nothing. No errors are logged to the console. I have tried fiddling around with attributes etc, but just cant seem to get it to capture the submit, and not sure where to start looking.

Here is my site: eddie-traylor.netlify.app/ Here is my github repo: github.com/naughty-cat-team/eddie-traylor

Here is my index.html code which I have included under the body section:

<form name="contact" netlify netlify-honeypot="bot-field" hidden>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <input type="tel" name="phone" />
    <textarea name="message"></textarea>
  </form>

Here is my contact form component:

import { useForm } from "react-hook-form";

const Contact = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => window.location.replace("/thankyou");

  return (
    <div className="px-6 mx-auto md:px-8 max-w-[1110px]">
      <div className="bg-white p-6 xl:px-10">
        <div className="hero-bg md:flex md:items-start xl:mt-10">
          <div className="pt-[50px] px-6 text-white md:px-10 md:basis-1/2">
            <h2>CONTACT</h2>
            <p className="mt-4">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse nam, beatae quas dolorum cum temporibus? Veniam ullam quibusdam nam! Sint delectus fugit eveniet
              blanditiis quas ratione animi vero cum.
            </p>
          </div>

          <form method="post" name="contact" onSubmit={handleSubmit(onSubmit)} className="contact px-6 pb-[70px] md:px-10 md:basis-1/2 md:pt-[50px]">
            <input type="hidden" name="form-name" value="contact" />
            <div className="mb-[50px] space-y-[14px]">
              <div className="relative w-full">
                <input
                  type="text"
                  name="name"
                  {...register("name", {
                    required: "Required",
                  })}
                  placeholder="Name"
                  className={`${errors.name ? "border-red placeholder:text-red/50" : ""}`}
                />
                {errors.name && <p className="absolute bottom-5 text-[12px] leading-[18px] tracking-[.08px] text-red right-4 md:right-6 italic">{errors.name.message}</p>}
              </div>
              <div className="relative">
                <input
                  type="email"
                  name="email"
                  {...register("email", {
                    required: "Required",
                    pattern: {
                      value: /[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$/,
                      message: "Invalid",
                    },
                  })}
                  placeholder="Email Address"
                  className={`${errors.email ? "border-red placeholder:text-red/50" : ""}`}
                />
                {errors.email && <p className="absolute bottom-5 text-[12px] leading-[18px] tracking-[.08px] text-red right-4 md:right-6 italic">{errors.email.message}</p>}
              </div>
              <div>
                <input type="tel" name="phone" {...register("phone")} placeholder="Phone" />
              </div>
              <div className="relative">
                <textarea
                  type="text"
                  name="message"
                  cols="30"
                  rows="4"
                  {...register("message", {
                    required: "Required",
                  })}
                  placeholder="Your Message"
                  className={`${errors.message ? "border-red placeholder:text-red/50" : ""}`}
                ></textarea>
                {errors.message && <p className="absolute bottom-5 text-[12px] leading-[18px] tracking-[.08px] text-red right-4 md:right-6 italic">{errors.message.message}</p>}
              </div>
            </div>
            <button type="submit" className="btn text-center text-white w-[170px] h-auto md:w-auto">
              Submit
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default Contact;

Thanks so much for any help or guidance!

Brenden

Answer 1

Turns out that this is a duplicate question, though the answers I received helped me narrow down my search. I basically used this answer and formatted it for my needs.

react-hook-forms & Netlify. Not passing form data

Thanks everyone for pointing me down the right direction!

Answer 2

Try this:

1. Remove the method from the <form method="post"/> tag, this tell html to make a post request is to the url set in the action attribute which is neither provided nor necessary in this case.

2. for this hidden tag <input type="hidden" name="form-name" value="contact" /> replcae it with this <input type="hidden" {...register("form_name")} />

then update your useForm with this

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm({
  defaultValues: {
    form_name: "contact",
  },
});

3. remove the name attribute from the <form /> this is also not necessary.

4. remove the name attributes from the <input/>'s and the <textarea/>. React hook forms register function add's them as props to the tags you spread it on based on the name you pass as the first parameter. register("<field_name>"). This should resolve your issue, if they don't, remove the onSubmit from the <form/> and pass it to the <button /> as an onClick. e.g.

 <form>
  <button type="button" onClick={handleSubmit(onSubmit)} 
  className="">Submit</button>
</form>

Answer 3

Update below code. Directly add errors and add console log for errors

const {
    register,
    handleSubmit,
    errors
  } = useForm();

On submit there may be some error on field and because of that it wont submit the form. Check and let me know.