Update Hidden Fields with Javascript on Page

Developer Support CMS Development
,
1

I am currently trying to update two hidden fields using Javascript. The two hidden fields utilize the name property, so I am using the getElementByName selector. I can get it to see the fields, and based on the console, it reports the value back as I’ve set it. However, when I look at the fields on Hubspot, none of the data comes through. Here is a breakdown of the script I wrote.

=====

document.addEventListener(“DOMContentLoaded”, function(event){

function productOfInterest(){

const productOfInterest = “Product of Interest”;

document.getElementsByName(“mkt_product_interest”).value = productOfInterest;

};

function sfCampaign(){

const sfCampaign = “SF Campaign Name”;

document.getElementsByName(“form_sf_campaign”).value = sfCampaign;

}

sfCampaign();

productOfInterest();

});

2

Hi, @TRowley :waving_hand: Thanks for reaching out. Hey, @Anton @MatthiasWeber do you have any tips you can share with, @TRowley? I have a feeling we’ll need more context to get specific solutions, and any troubleshooting suggestions you can provide are greatly appreciated.

Thank you! — Jaycee

3

Hi Hi ,

I fear that the hubspot-logic ignores hidden fields (for many reasons :wink: - for example honeypot-fields, …).

My tip would be: unhidde them for testing and have a look if the values are available then in hubspot.






Gemeinsam für digitales Unternehmenswachstum! Wir glauben an Human Centric, Online-Marketing mit Inbound und Digitale Geschäftsprozesse.
Sie wollen mit Ihrem Unternehmen weiter kommen? Mit den Digital-Webern wird der Weg einfacher!


@Jaycee_Lewis

4

Hi @TRowley,

since forms are rendered with Hubl(server-side) and JS is loaded on client-side you can’t really control forms with JS by default. BUT you can create a custom module with a form function and a modified embed code from any form - doesn’t really matter and modify the form load by adding your script with onBeforeFormInit. Here’s the documentation about modifying forms.

a custom module code could look like this

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
 hbspt.forms.create({
 region: "na1",
 portalId: "{{ hub_id }}",
 formId: "{{ module.form_field.form_id }}",
 onBeforeFormInit: {
{# YOUR SCRIPT #}
}
 });
</script>

best,

Anton

5

This touches on something I’ll need to do, but as a complete Hubspot neophyte I need to ask first, how do I even get Javascript onto the page where the form is?

Steve