Shopify Forms - Can Email be Prepopulated?

[Dascalargo]

We’re using Shopify Forms to collect additional information from customers. In most cases, the customer will already be signed-in to our website. Is there any way for us to prepopulate the email address field on the form? If a customer has to enter it and makes a typo, we not only don’t get the info we want, but it creates a new customer record, too.

[Dascalargo]

I get that’s how you’d do it if I created the form, but will that work with Shopify Forms? The code for the form is dynamically created by the app.

[SamuelR]

Please update if you know how to do this for the shopify forms app.

It doesn’t seem possible to do any script customisation to what the forms app creates.

[Dascalargo]

I’m pretty sure it’s not possible.

[rhysnhall]

I am sick of these forums being full of answers where the poster did not read the question at all. "Shopify Partner" doesn't really mean much anymore.

[rhysnhall]

If anyone is looking for a solution and has the ability to code something, this is how I manipulate the Shopify forms. Just keep in mind that this is not a 100% foolproof solution.

1. Get the element that will host the Shopify Form embed. You can use the form ID to get this.

const formId = xxxxx;
const form = docuement.querySelector(`[data-forms-id="${formId}"]`);

2. Add a mutation observer to it.

const formObserver = new MutationObserver(mutationCallback);
formObserver.observe(form, {attributes: false, childList: true, subtree: true)};

3. Create a mutation callback that sets the form email field.

const mutationCallback = (mutationList) => {
  mutationList.forEach(i => {
    if(i.type === 'childList') {
      const formEmbded = i.target.querySelector('form-embed');
      const emailField = formEmbed?.shadowRoot.querySelector('#email');
      // Set a timeout to give the form app time to setup.
      setTimeout(() => {
        emailField.value = 'hello@email.com';
        // THIS IS IMPORTANT. Value update will not save otherwise.
        emailField.dispatchEvent(new Event('input', {
          view: window,
          bubbles: true,
          cancelable: true
        }))
      }, 500);
    }
  })
}

Keep in mind, this solution is not foolproof;

• We are lucky the Shadow root on the form embed is open. That might not always be the case.
• There is always the chance that 500ms won't be enough time to allow the form to setup. This will mean the update to the email field may not work. Extend this to cover more use cases. Ultimately, automatically updating most of the time, is better than none of the time.

You can also use this same solution to override styles by editing elements direct, or inserting a stylesheet into the shadow root.