Implementing Contact form in Hydrogen Storefront?

Topic summary

Goal: add a contact form to a Hydrogen (Shopify’s React-based custom storefront) that emails submissions, without a built-in Shopify API. Embedding an existing form failed; users asked for low-cost options and whether rebuilding is viable.

Status/updates: A GitHub discussion indicates Shopify devs are working on an example. A community link was shared, but no official solution in thread.

Working approach shared: Implemented with Remix + Conform (form handling) + Zod (validation) + Resend (email service). Create an API route with an action; on submit, post to that route to send an email from a domain you control (for proper Resend setup). Optional: send an automated confirmation email to the customer.

Implementation notes: Add required environment variables and extend TypeScript env.d.ts to avoid type errors. Code screenshots are attached and central to the implementation details.

Open issue: Difficulty retrieving the submission result when the form lives in a different route (e.g., footer in root) than the send action (/contact/send); only “in-flight” status is available via Remix fetcher.

Outcome: Partial solution exists; official example pending. Discussion remains open with unanswered questions about cross-route result handling.

Summarized with AI on December 20. AI used: gpt-5.

try this

https://community.shopify.com/c/user/ssoregistrationpage?dest_url=https%3A%2F%2Fcommunity.shopify.com%2Fc%2Fhydrogen-headless-and-storefront%2Fimplementing-contact-form-in-hydrogen-storefront%2Fm-p%2F1977711%2Fthread-id%2F3718