APIs & Integrations

nikodev
Top Contributor | Elite Partner
Top Contributor | Elite Partner

Issues Submitting HubSpot Form on a Shopify Page

Hello everyone, 

I've been posting a lot these past few days, and I appreciate all of the help I've been getting. 

Alas, I've run into another issue trying to get a form submitted on a shopify page.

Preview link: https://sm0rs1wc3drkzexd-8324710466.shopifypreview.com

Using that link, you'd have to navigate to any of the product pages, and then click on a product -> hit the "request more info" button and the form in question will pop up in a modal. 

I have a simple script running to pick up elements found on the page and insert them into hidden fields on the form. This portion seems to be working just fine. 

The problem is that it is not submitting. 

I'm hoping someone will be able to confirm for me that it's a simple issue of it being on a preview page. I unfortunately don't have access to the page itself to do any testing of my own (nor do I have shopify knowledge, so it's probably for the best). 

Does anyone have knowledge of how the shopify preview works? Or previews in general? I know form submissions form a preview in HS won't go through, not sure if this applies in all scenarios though. I'm not seeing any errors in the console to help carve a path forward. 

I'd really appreciate any help that can be provided.
Edits: shopify* not spotify



A8 Labs

3 Replies 3
John
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Issues Submitting HubSpot Form on a Shopify Page

You'll want to put that script inside of the hubspot form embed code. See customizing the form embed code for more info. Look at the onFormSubmit and onFormReady callbacks.



I like kudos almost as much as cake – a close second.

nikodev
Top Contributor | Elite Partner
Top Contributor | Elite Partner

Issues Submitting HubSpot Form on a Shopify Page

@John - thanks for the response. Would you mind helping me take this to the finish line by providing some insight on how to include that script within the embed code?

I've been trying the below, but this doesn't seem sufficient: 

 

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]→
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "9305378",
    formId: "696dde7a-1a86-4089-b13b-f53beeb28e31",
    onFormReady: function($form) {
        let itemFormField = document.querySelector("input[name='customerinterests']")
        let priceFormField = document.querySelector("input[name='asking_price']")
	itemFormField.value = "Test 1"
        priceFormField.value = "Test 2"
}
});
</script>

 

Edit: it seems this is because it requires jquery. I was told by a couple other sources that JS would work just as well. My knowledge of jquery is along the lines of null. 

A8 Labs

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Issues Submitting HubSpot Form on a Shopify Page

@John , any tips for our friend?