Hi! I have a client who is using a form from the Shopify App “Forms” - they want a customer to be able to scan a QR code to then autopopulate the serial number in the form. They know that each QR code will have to be unique, but this will help solve the problem where the customer says the serial code is hard to read.
How would I create this URL to autopopulate that one field in the form. (It is a customer metafield if that helps).
The native Shopify Forms app is super rigid and doesn’t support URL parameter pre-filling. Because of how it renders on the page, you can’t really hack it with JS either.
Honestly, I’d ditch the app for this. If you build a standard custom Liquid form on a page, you can easily use a few lines of Javascript to grab the URL parameter (like ?serial=12345) and inject it into the input field.
Since you mentioned saving it to a customer metafield though, standard Liquid forms won’t do that natively without an API call. You’re probably better off using a more robust app like Helium Customer Fields. It maps directly to customer metafields and handles URL parameters way better.
Forms HTML is indeed inside Shadow DOM, but it’s open and you can push data into it with JS.
I’ve done this before or you can contact @lixonic – he’s implemented wishlist synchronization using Shopify Forms, may be he has code to share.