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

[nikodev]

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: 

<script src="" defer>	
document.addEventListener("DOMContentLoaded", function() {	
 let formField1 = document.querySelector("input[name='test1']")
 let valueToInsert = document.getElementById("first").innerText
 formField1.value = valueToInsert
});
</script>

 
I'd really appreciate any help you could provide!

[nikodev · Accepted solution]

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: 

<script>	
    window.addEventListener('load', function () {
        let valueToInsert = document.getElementById("first").innerText
        let formField = document.querySelector("input[name='test1']")
				formField.value = valueToInsert
        console.log(formField.value)
    });
</script>

[piersg · Accepted solution]

@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.

[nikodev]

Incredibly helpful - thank you. 

[piersg]

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
  }
});

[nikodev]

@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: 

<script>    
    window.addEventListener('load', function () {
        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
    });
</script>

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

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
        }      

[nikodev]

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

[nikodev · Accepted solution]

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: 

<script>	
    window.addEventListener('load', function () {
        let valueToInsert = document.getElementById("first").innerText
        let formField = document.querySelector("input[name='test1']")
				formField.value = valueToInsert
        console.log(formField.value)
    });
</script>