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