Javascript Cookie Values passed into Hubspot Form

RobinSwapcard · ‎Jul 23, 2019

Hi,

I'm trying to prefill my form with data from cookie. I do not use jquery.

      window.addEventListener("message", event => {
        if (
          event.data.eventName === "onFormReady" &&
          event.data.type === "hsFormCallback"
        ) {
          var event = new Event("change");
          var evt = document.createEvent("HTMLEvents");
          evt.initEvent("change", false, true);

          document.getElementsByName("marketing_lead_source")[0].value =
            "robin";

          document
            .getElementsByName("marketing_lead_source")[0]
            .dispatchEvent(event);

          console.log(
            document.getElementsByName("marketing_lead_source")[0].value
          );
        }
      });

Nothing works 😞

WendyGoh · ‎Jul 25, 2019

Hi @RobinSwapcard,

Digging into this, the best way to implement this is through the onFormSubmit callback and this would require jquery (I understand that you mention you ain't using jquery now, is there a reason why?)

If you'd like an example of a working code, you can refer to the following codes:

<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>
<!--[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>
  hbspt.forms.create({
	portalId: "{{portal_id}}",
	formId: "{{form_id}}",

	onFormSubmit: function($form, ctx){
		document.getElementById("{{the marketing lead source form id}}").value = "Robin";
	}

});
</script>

</body>
</html>

Hope this helps!

View solution in original post

WendyGoh · ‎Jul 23, 2019

Hi @RobinSwapcard,

When looking at the codes you provided do you mind clarifying where are you getting the cookies and using the cookie to prefill the form?

Currently, it seems that you're setting the form field lead source to robin, can I check if that prefilled the form field to robin?

Ultimately, you'd like to use the cookie you retrieve to populate on the HubSpot form, am I right?

In this case, do you mind sharing with me the page that the form is on and the function you wrote to get the cookies?

RobinSwapcard · ‎Jul 25, 2019

Hello,

The cookie is not the issue. Right now I'm not able to set the source as "robin"

https://www.swapcard.com/demo

WendyGoh · ‎Jul 25, 2019

Hi @RobinSwapcard,

Digging into this, the best way to implement this is through the onFormSubmit callback and this would require jquery (I understand that you mention you ain't using jquery now, is there a reason why?)

If you'd like an example of a working code, you can refer to the following codes:

<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>
<!--[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>
  hbspt.forms.create({
	portalId: "{{portal_id}}",
	formId: "{{form_id}}",

	onFormSubmit: function($form, ctx){
		document.getElementById("{{the marketing lead source form id}}").value = "Robin";
	}

});
</script>

</body>
</html>

Hope this helps!

APIs & Integrations