Dynamically changing the embed code formId

SOLVE
khfreelance
Member

Is it possible to pass a javascript variable into the embed form code as the formId?

My client is wanting to have different forms based on the content of the page but due to the structure of the application framework they are using the only place we can place the embed code is used for all pages using that template. The form works fine when the formId is manually assigned but this would require one generic form for all pages. When trying to pass in a variable the form does not load despite the variable being the same string that works when manually assigned.

                var FormID = "###";
                hbspt.forms.create({
                    portalId: "###",
                    formId: FormID
                });
0 Upvotes
1 Accepted solution

Accepted Solutions
WendyGoh
Solution
HubSpot Employee

Hey @khfreelance,

 

It is possible. 

 

On my end, I tried the following script

 

      <!--[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>
   var FormID = "{{form id}}";
  hbspt.forms.create({
	portalId: "{{portal id}}",
	formId: FormID
});
</script>

 

and I was able to see that the form rendered on this page just fine.

View solution in original post

1 Reply 1
WendyGoh
Solution
HubSpot Employee

Hey @khfreelance,

 

It is possible. 

 

On my end, I tried the following script

 

      <!--[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>
   var FormID = "{{form id}}";
  hbspt.forms.create({
	portalId: "{{portal id}}",
	formId: FormID
});
</script>

 

and I was able to see that the form rendered on this page just fine.

View solution in original post