Implementing Contact form in Hydrogen Storefront?
It may not be the best solution but I got it working using conform, zod and resend. This is how I normally do it in my Remix projects so figured it was worth a shot in Hydrogen and so far it's working well. The only thing is I haven't figured out how to retrieve the result of the submission correctly if the form is not in the same route as your send action (in my case I have my contact form in the footer which is a child of the root route and my send action is in the /contact/send route). Therefore I can only get the "in flight" status from the form fetcher in Remix, not the actual result of the submission. Most likely I'm just missing something so if there is a way to do it let me know!
But if you want to give it a go, just set up an API route with an action and call it on form submission. It needs to come from an email domain that you have control of so you can set it up properly in Resend. So currently a user will submit a form on the business site, the business receives an email (from my agency email account) with the customer enquiry details and then the business can reply to the customer from their email. You can also add an automated email to the customer as well if you want to confirm that their enquiry has been received (which I haven't done yet, but you would just set up a second email to the customer in the same route action).
The only tricky part in Hydrogen was adding a new environment variable (because I didn't read the docs at first 😅) and making sure Typescript didn't scream at me by extending the env.d.ts once I had pulled the variable from the Shopify storefront.
Sorry about the theme, just wear some sunglasses when reading the code 😅😎
