Hi,
I’m trying to use Netlify forms with NextJS and React-hook-forms, to avoid the code swapping during build, I’ve figured that just sending an AJAX request would be the easier way to implement it, but when submitting I’m getting a 404. Below is my code:
The submit function
const onSubmit = async (data: IWaitListForm) => {
const value = new URLSearchParams({
...data,
"form-name": "waitlist",
"netlify-honeypot": "age",
}).toString();
const result = await fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: value,
});
};
The form:
<form onSubmit={handleSubmit(onSubmit)}>
<Input
{...register("name", { required: true })}
label="Your name"
status={errors.name ? "error" : "default"}
/>
<Input
{...register("email", { required: true })}
label="Your email"
type="email"
status={errors.email ? "error" : "default"}
/>
<div style={{ display: "none" }}>
<Input
name="age"
label="Your Age"
type="number"
status={errors.email ? "error" : "default"}
/>
</div>
<Button type="submit">Join the waitlist</Button>
</form>
And that’s basically what’s in that page for now. Any ideas why this could be failing?
Thanks in advance!
