# Forms with React are recognized but submits are not captured

**URL:** <https://answers.netlify.com/t/forms-with-react-are-recognized-but-submits-are-not-captured/110675>\
**Category:** Support\
**Tags:** netlify-forms, nextjs\
**Created:** [January 18, 2024, 6:29pm UTC](https://answers.netlify.com/t/forms-with-react-are-recognized-but-submits-are-not-captured/110675 "2024-01-18T18:29:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![naughty-cat](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/naughty-cat/32/58070_2.png) [@naughty-cat](https://answers.netlify.com/u/naughty-cat)\
**Post date:** [January 18, 2024, 6:29pm UTC](https://answers.netlify.com/t/forms-with-react-are-recognized-but-submits-are-not-captured/110675/1 "2024-01-18T18:29:01Z")

</div>

Hi all,

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 - naughty-cat-team/eddie-traylor](http://github.com/naughty-cat-team/eddie-traylor)

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

```auto
<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:

```auto
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

---

<div class="post-metadata">

**Author:** ![Melvin](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/melvin/32/23606_2.png) [@Melvin](https://answers.netlify.com/u/Melvin)\
**Post date:** [January 18, 2024, 8:16pm UTC](https://answers.netlify.com/t/forms-with-react-are-recognized-but-submits-are-not-captured/110675/2 "2024-01-18T20:16:41Z")

</div>

Hi @naughty-cat,

Thanks for reaching out and welcome to Netlify’s Support forums!

I see one successful submission made about 30 minutes ago. Seems it may have been from this deploy: [Netlify App](https://app.netlify.com/sites/eddie-traylor/deploys/65a97be02085050008dc1805) as I was able to make a successful test submission here: [https://65a97be02085050008dc1805--eddie-traylor.netlify.app/](https://65a97be02085050008dc1805--eddie-traylor.netlify.app/)

Have you seen our Support Guide here:

[[Support Guide] Form problems, form debugging, 404 when submitting - Support / Support Guides - Netlify Support Forums](https://answers.netlify.com/t/support-guide-form-problems-form-debugging-404-when-submitting/92)

Specifically we recommend reviewing this section here: [[Support Guide] Form problems, form debugging, 404 when submitting - Support / Support Guides - Netlify Support Forums](https://answers.netlify.com/t/support-guide-form-problems-form-debugging-404-when-submitting/92#submits-fine-yet-no-submissions-in-ui-5) of the above linked guide to see if that helps you get form submissions working.

---

<div class="post-metadata">

**Author:** ![naughty-cat](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/naughty-cat/32/58070_2.png) [@naughty-cat](https://answers.netlify.com/u/naughty-cat)\
**Post date:** [January 18, 2024, 8:28pm UTC](https://answers.netlify.com/t/forms-with-react-are-recognized-but-submits-are-not-captured/110675/3 "2024-01-18T20:28:34Z")

</div>

Hi, and thanks for your reply!

Yes those successful submissions were able to get through when I removed the onsubmit bit in my above code, but when I add those in it still does nothing. The point of them is to render a thank you message instead of the default redirect (which works as intended, but the form will not be submitted in this case).

I have seen those docs but they were not able to resolve this issue, I’m not receiving any 404, no errors of any kind in fact. The thank you displays correctly, but no submission is made. I republished the version that I have above if it’s helpful. Any ideas?

Thanks!

---

<div class="post-metadata">

**Author:** ![naughty-cat](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/naughty-cat/32/58070_2.png) [@naughty-cat](https://answers.netlify.com/u/naughty-cat)\
**Post date:** [January 18, 2024, 9:34pm UTC](https://answers.netlify.com/t/forms-with-react-are-recognized-but-submits-are-not-captured/110675/4 "2024-01-18T21:34:11Z")

</div>

In case anyone else comes across this, I did get this working by using ajax instead. The big trick was getting it to work with react-hook-form. I used [this](https://stackoverflow.com/questions/62662511/react-hook-forms-netlify-not-passing-form-data) stack exchange post as inspiration and mostly copy and pasted it over, and now it’s all working like a charm.

---

<div class="post-metadata">

**Author:** ![SamO](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/samo/32/41847_2.png) [@SamO](https://answers.netlify.com/u/SamO)\
**Post date:** [January 19, 2024, 6:16pm UTC](https://answers.netlify.com/t/forms-with-react-are-recognized-but-submits-are-not-captured/110675/5 "2024-01-19T18:16:44Z")

</div>

thanks for sharing your solution with the community!