Populating a hidden field in a HubSpot form with Javascript

[KKoch0]

Hello All,

I have a WordPress website that uses the HubSpot plugin. We have a library of PDF assets (white papers, eBooks, case studies, etc.) and use HubSpot forms on gated pages to acquire a user's name and contact info before serving up the requested asset.

My manager has charged me with the task of consolidating these forms into one form that we can embed on multiple WordPress pages, and each page will serve a different asset. After ruling out several different approaches, I decided that the best solution involves calling the form with a Javascript embed (rather than the HubSpot short code] and pre-populating the value of a hidden field with an identifier for the specific asset in question.

I've looked through the forums and seen the code to generally accomplish this task, but it's not working for me. The form loads just fine, and submits just fine, but it's ignoring my attempt to pre-fill a value in a hidden field.

This is the page in qeustion - https://www.sparkcognition.com/ebook-unlocking-the-operational-value-of-visual-ai/

This is the code I'm using to generate that form:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "xxxxxx",
formId: "xxxxxx",
onFormReady: function($form) {
$('input[name="asset_requested"]').val("SCE-VAA-EBK").change();
}
});
</script>
<script>

Can anyone help me understand why the 'asset_requested' hidden field is not picking up the "SCE-VAA-EBK" value?

In advance, thanks!

[GRajput · Accepted solution]

Hi @KKoch0 

here is the code that works fine for me.

hbspt.forms.create({
    region: "na1",
    portalId: "xxxxxx",
    formId: "xxxxxx",
    onFormReady: function($form) {
        // Wait until the form is fully rendered and fields are accessible
        setTimeout(function() {
            const assetField = $form.find('input[name="asset_requested"]');
            if (assetField.length) {
                 //do your codinng here
            }
        }, 500); // Adjust timeout as needed for your form loading speed
    }
});

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!

[KKoch0 · Accepted solution]

Hey Guarav (and all),

Good news -- I think I've finally figured out how to make this work for me. Don't ask me why this works, and the other code doesn't 🙂 I just know that it is working. Some things I figured out...

* The code seems to be more cooperative when I specify the field in question with its ID, rather than its name.

* During the troubleshooting stage I switched the field from hidden to visible, just so I could see what was happening. Once I got it working and then switched it back to a hidden field, it stopped working. I made it "hidden" again by leaving it visible with HubSpot's settings, but applying some CSS on the front end to make the field and its constituent parts (label, field, and all) hidden from view. 

Here's what I got to work:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>

<script>

window.hsFormsOnReady = window.hsFormsOnReady || [];

window.hsFormsOnReady.push(()=>{

  hbspt.forms.create({

    region: "na1",

    portalId: "xxxx",

    formId: "xxxx",

    onFormReady: function(form) {

setTimeout(function() {

// Select the "asset_requested" input field by its ID

var assetField = document.getElementById('asset_requested-626f9679-5acb-457a-a47d-d6941897d1e0');

if (assetField) {

// Set the value

assetField.value = "SCE-VAA-EBK";

} 

}, 1000); // Adjust timeout as needed for your form loading speed

     }

  })});

</script>

And here's the front-end css code:

.hs_asset_requested {
display:none;
}

I hope this helps someone else! Cheers 🙂

[KKoch0]

Hello Gurav!

I really appreciate your help---and really wish I could tell you that this is working for me. Unfortunately the script still isn't filling in that variable. 

Here's the code I have now. I even threw in an "alert" to confirm that this bit was executing at all. It is, but for some reason the field still isn't picking up the value....

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
window.hsFormsOnReady = window.hsFormsOnReady || [];
window.hsFormsOnReady.push(()=>{
hbspt.forms.create({
region: "na1",
portalId: "xxxx",
formId: "xxxx",
onFormReady: function($form) {
// Wait until the form is fully rendered and fields are accessible
setTimeout(function() {
const assetField = $form.find('input[name="asset_requested"]');
if (assetField.length) {
alert("Hello! Confirming that we're reaching this point.");
$('input[name="asset_requested"]').val("SCE-VAA-EBK").change();
}
}, 1000); // Adjust timeout as needed for your form loading speed
}
})});
</script>

I have tried toying with the timeout length without success. I think it's correct to use .val (rather than .value) in the line that changes the value of the box. I have also confirmed that the real name of the input box is asset_requested as the script specifies. Again, if you want to see the page and form where this script is loading, it's here: https://www.sparkcognition.com/ebook-unlocking-the-operational-value-of-visual-ai/

Any ideas why this still is giving me so much trouble? I'll continue troubleshooting on my end, but any other ideas will be most welcome. And, I will be delighted to mark "Solution Accepted" and upvote when we've figured this out 🙂

[KKoch0]

Hey Gaurav! I really appreciate your help on this one. Here's the code I'm trying now. It doesn't seem to work (at least not yet). Am I doing this right?

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>

<script>

window.hsFormsOnReady = window.hsFormsOnReady || [];

window.hsFormsOnReady.push(()=>{

  hbspt.forms.create({

    region: "na1",

    portalId: "xxxx",

    formId: "xxxx",

    onFormReady: function($form) {

window.setTimeout(function() {

$('input[name="asset_requested"]').value("SCE-VAA-EBK").change();

}, 500);        

    }

  })});

</script>

I've tried the setTimeout line with and without "window" out front. Many thanks!

[GRajput · Accepted solution]

Hi @KKoch0 

here is the code that works fine for me.

hbspt.forms.create({
    region: "na1",
    portalId: "xxxxxx",
    formId: "xxxxxx",
    onFormReady: function($form) {
        // Wait until the form is fully rendered and fields are accessible
        setTimeout(function() {
            const assetField = $form.find('input[name="asset_requested"]');
            if (assetField.length) {
                 //do your codinng here
            }
        }, 500); // Adjust timeout as needed for your form loading speed
    }
});

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!

[GRajput]

Hi @KKoch0 

The onFormReady callback runs when the form is fully loaded, but HubSpot's internal scripts might still override the hidden field value after your script runs.
Try using a setTimeout function inside onFormReady with different times and then it should work as per your requirement.

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!