I’m working on a Shopify store and need to create a custom contact form that sends data to an external service instead of Shopify’s default handling. I’m pretty new to the Shopify platform and thought my Rails background would help, but I’m finding the Liquid templating system quite different from what I expected.
I tried looking at the standard contact form examples but they all seem to submit data internally. Is there a way to modify the form action to point to a different endpoint? I need the form to POST the user input to my own server for processing.
Has anyone successfully implemented something like this? What’s the best approach for handling external form submissions in Shopify themes?
You can indeed modify the form’s action attribute to submit to your external server URL. Be cautious of CORS issues when posting directly from the client side. A practical approach is to set up a proxy endpoint on your server to manage the POST requests and handle CORS headers effectively. Alternatively, using JavaScript to capture the form submission and sending it via AJAX can work as well, though it may require more effort on the client side. Additionally, consider implementing a fallback submission method or robust error handling to ensure that the form remains functional, especially if the external service experiences downtime. The Liquid templating won’t hinder your ability to use standard HTML form elements for this integration.
The form action modification works, but I’d handle it with JavaScript instead of direct posting. When I built this for a client’s Shopify store, fetch() or XMLHttpRequest gave me way better control over errors and user feedback. Just use event.preventDefault() to stop the default submission, then POST your serialized form data to the external endpoint. You can show loading states, handle failures properly, and give users immediate feedback without redirecting them. Make sure your server sends back proper JSON so you can parse success/error states on the frontend. Also, some browsers will flag cross-origin requests, so test in different environments before you launch.
Hit the same problem moving from Rails to Shopify themes. Shopify forms want specific endpoints, but you can definitely override this. Here’s what worked for me: keep the standard Shopify form structure but add a hidden input to flag external submissions. Use JavaScript to check for that flag and redirect the POST where you need it. You get SEO-friendly forms but keep full control over your data flow. Your Rails background will help once you get past Liquid’s weirdness - the backend processing stays the same. Just validate everything server-side since you’re skipping Shopify’s validation. This beats pure AJAX, especially on mobile where connections drop.
Both approaches work, but CORS and server endpoints get messy fast. I’ve hit this exact problem multiple times - the maintenance overhead sucks.
I ended up using an automation workflow that catches form submissions and routes them wherever needed. No CORS headaches, no custom endpoints to maintain, and you can easily add validation, filtering, or send data to multiple services.
You keep Shopify’s native form handling and just intercept the data flow. I’ve built workflows that grab form data, clean it up, format it, and push it to CRMs, email services, or custom APIs. Takes 10 minutes to set up vs hours debugging CORS.
If you need to change destinations later or add new ones, it’s a few clicks instead of redeploying code.
Check out Latenode for this - way cleaner than the server proxy approach: https://latenode.com
Skip the server setup completely. I had this exact problem last month - the client needed form data going to three different services.
I skipped building custom endpoints and fighting CORS. Instead, I set up automation that catches Shopify form submissions and routes them automatically. The form stays native Shopify (works everywhere), but data goes wherever you need.
You can transform data, add validation, and hit multiple endpoints without touching server code. When requirements change (they always do), you just tweak the automation instead of redeploying.
I’ve done this for contact forms, lead capture, even complex multi-step stuff. Takes minutes to set up and you never maintain custom APIs or debug browser issues.
Latenode handles this perfectly and keeps your Shopify store clean: https://latenode.com
just change the form action to your external URL, easy peasy! just make sure your server’s set up for CORS. i did this before to send data to my API instead of Shopify’s built-in stuff, no probs at all!
webhooks could work well here - just set up a shopify webhook that fires when forms get submitted, then process the data however you want. takes more work upfront but keeps everything server-side and ditches the CORS nightmare.