Hi, I cannot get Netlify Forms to work with the Hydrogen framework (deployed with SSR edge functions). I suspect it has to do with Hydrogen intercepting the post request but I’m not sure.
I followed the official guide for Javascript Forms.
What I did
- Added an extra helper form in
index.html - Created a TSX form with
<form name='contact-me' data-netlify="true" data-netlify-honeypot="bot-field" />
and<input type="hidden" name="form-name" value="contact-me" /> - Created a submit handler with the fetch api
Notes
- The form
contact-medoes show in the Netlify Dashboard as a active form - The post request is correctly send.
Site
Code
// index.html
...
<body>
<div id="root"></div>
<form name='contact-me' netlify="true" netlify-honeypot="bot-field">
<label htmlFor="base-input" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Naam</label>
<input name='name' onChange={handleChange} type="text" id="base-input"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" />
<label htmlFor="base-input"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Telefoon</label>
<input name='phone' onChange={handleChange} type="tel" id="base-input"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" />
<label htmlFor='email' className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Email</label>
<input name='email' onChange={handleChange} type="email" id="email"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required />
<label htmlFor="message" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Your
message</label>
<textarea name='message' onChange={handleChange} id="message" rows={4}
className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Laat een bericht achter..."></textarea>
</form>
</body>
...
// Contact.client.tsx
return (
...
<form
name='contact-me'
data-netlify="true"
data-netlify-honeypot="bot-field"
action='/'
onSubmit={netlifySubmit}>
<input type="hidden" name="form-name" value="contact-me" />
<div className="mb-6">
<label htmlFor="base-input" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Naam</label>
<input name='name' onChange={handleChange} type="text" id="base-input" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" />
</div>
<div className="mb-6">
<label htmlFor="base-input" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Telefoon</label>
<input name='phone' onChange={handleChange} type="tel" id="base-input" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" />
</div>
<div className="mb-6">
<label htmlFor='email' className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Email</label>
<input name='email' onChange={handleChange} type="email" id="email" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required />
</div>
<label htmlFor="message" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Your message</label>
<textarea name='message' onChange={handleChange} id="message" rows={4} className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Laat een bericht achter..."></textarea>
<button className="flex justify-center items-center w-full sm:w-auto h-13 px-8 bg-brown-400 text-neutral-800 font-medium rounded-xl whitespace-nowrap hover:shadow-primary transition-shadow duration-300 hover:-translate-y-[1px] mt-12">
<SendIcon />
<span className='ml-2'>Verstuur</span>
</button>
{resultDisplayText}
</form>
...
)
// Contact.client.tsx
function netlifySubmit(ev: FormEvent): any {
ev.preventDefault();
const errMsg = "Er ging iets mis...";
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: encodeFormData({ "form-name": "contact-me", ...formData })
})
.then((res) => setResultDisplayText(res.ok ? "Verstuurd!" : errMsg))
.catch(() => {
setResultDisplayText(errMsg);
});
}