topic Re: How do I target the contents of a form in HubSpot? in CMS Development

How do I target the contents of a form in HubSpot?

nikodev — Wed, 05 May 2021 18:45:50 GMT

Hello there!

I'm trying to insert values into hidden fields on a HubSpot form. I can't for the life of me figure out what's going on here.

This should be very simple. However, when testing in console, trying to target these elements are yielding null or undefined. Does anyone know how to get around this?

I'm simply trying to find text on the page and insert it into hidden form fields before the form submission goes through - I'm baffled by the issue I'm having.

Here is my code:

I'd really appreciate any help you could provide!

Re: How do I target the contents of a form in HubSpot?

nikodev — Wed, 05 May 2021 19:19:32 GMT

In case anyone ever has the misfortune of running into the same issue I did, picking up form elements held within a module seems to require:

Re: How do I target the contents of a form in HubSpot?

piersg — Thu, 06 May 2021 08:26:00 GMT

The DOMContentLoaded event happens before Hubspot forms are loaded, so your variable targeting the input returns undefined because the input doesn't exist yet. It happens before stylesheets, images, and subframes etc have loaded. You could change it to the load event (fired after all resources have loaded) or, better yet, use the onFormReady event from the Hubspot global form events to make sure the form has loaded and the fields exist:

window.addEventListener('message', event => { if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') { let formField1 = document.querySelector("input[name='test1']") let valueToInsert = document.getElementById("first").innerText formField1.value = valueToInsert } });

Re: How do I target the contents of a form in HubSpot?

nikodev — Mon, 17 May 2021 18:44:23 GMT

@piersg Thanks for getting back to me! Totally unfamiliar with the 'message' event. Very useful. I thought my script started working, but I'm still having issues. To add a bit more inconvenience, this script is being loaded within a Shopify page I don't have access to, so my ability to test through trial and error is rather limited.

My latest iteration is:

The page it is being utilized on is a Shopify page - https://rauantiques.com/collections/antiques/products/silver-gilt-exhibition-tea-table-by-maison-aucoc?variant=34759888961671

I'm not sure if it matters, but the form is held within a modal through the "request more information" button found on the above page. While trying to test what I could with the developer tools, I noticed that when I actually had the form up on the page, and physically identified the appropriate form inputs, only then were my querySelectors working, and not at any point before, which I find strange. While the form was up, I'm also losing the ability to identify the elements that I want to populate the input values with. I'm not sure if this is due to some quirk within the developer tools (the javscript context would switch from "top" to the actual form iframe). I don't know if my script would behave the same way in the real application.

Any help you could provide would be really appreciated.

Is using the onFormReady more appropriate? I'd have to use JS - my jQuery knowledge is nonexistent. If so, would that look like this?:

hbspt.forms.create({ portalId: '', formId: '', onFormSubmit: function($form) { let itemNumber = document.getElementsByClassName("text-slate")[0].children[0].innerText let price = document.getElementsByClassName("actual-price")[0].innerText let itemFormField = document.querySelector("input[name='customerinterests']") let priceFormField = document.querySelector("input[name='asking_price']") itemFormField.value = itemNumber priceFormField.value = price }

Re: How do I target the contents of a form in HubSpot?

nikodev — Mon, 17 May 2021 19:41:00 GMT

I suspect a big part of my issue is that the form is being loaded within an iframe.

Re: How do I target the contents of a form in HubSpot?

piersg — Tue, 18 May 2021 09:46:12 GMT

@nikodev Yes, you can't access an iframe with a different origin using JavaScript, it would be a huge security flaw if you could. The iframe's source is "https://go.rauantiques.com/..." which is a different hostname from the site so counts as a different origin. If you had access to the page/domain you could create a work around using postMessage.

Re: How do I target the contents of a form in HubSpot?

nikodev — Tue, 18 May 2021 13:48:26 GMT

Incredibly helpful - thank you.