# How to embed javascript in form

**URL:** <https://community.hubspot.com/t/how-to-embed-javascript-in-form/20000>\
**Category:** Lead Capture Tools\
**Tags:** javascript, forms\
**Created:** [April 10, 2020, 11:05pm UTC](https://community.hubspot.com/t/how-to-embed-javascript-in-form/20000 "2020-04-10T23:05:45Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![mmetros](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mmetros/32/86357_2.png) [@mmetros](https://community.hubspot.com/u/mmetros)\
**Post date:** [April 10, 2020, 11:05pm UTC](https://community.hubspot.com/t/how-to-embed-javascript-in-form/20000/1 "2020-04-10T23:05:45Z")

</div>

When a form is submitted I Want to retrieve certain values from cookies on their browser and store it in the hidden fields. How can we do this?

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [April 11, 2020, 12:22am UTC](https://community.hubspot.com/t/how-to-embed-javascript-in-form/20000/2 "2020-04-11T00:22:01Z")

</div>

Hi @mmetros ,

You’ll want to use the form embed code instead of the form module and include in the embed an onFormSubmit fuction with the custom code you want to run.  
[https://developers.hubspot.com/docs/methods/forms/advanced\_form\_options](https://developers.hubspot.com/docs/methods/forms/advanced_form_options)

```auto
hbspt.forms.create({
 portalId: '',
 formId: '',
 onFormSubmit: function($form) {
 // YOUR SCRIPT HERE
 } 
}); 

```

---

<div class="post-metadata">

**Author:** ![mmetros](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mmetros/32/86357_2.png) [@mmetros](https://community.hubspot.com/u/mmetros)\
**Post date:** [April 11, 2020, 12:35am UTC](https://community.hubspot.com/t/how-to-embed-javascript-in-form/20000/3 "2020-04-11T00:35:33Z")

</div>

We are currently hosting the forms in WordPress’s and using the HubSpot Form shortcode to embed the HubSpot Form.

How can we extract the Cookies in this case?

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [April 11, 2020, 12:49am UTC](https://community.hubspot.com/t/how-to-embed-javascript-in-form/20000/4 "2020-04-11T00:49:27Z")

</div>

You can still use the embed code. Many themes use a page builder that includes a HTML / Script module you can use to place script into your post/page. If your theme doesn’t you can use a [code embed](https://wordpress.org/plugins/simple-embed-code/) plugin to create short codes for the embeds.  
Or since you’re just grabbing information that is already available before submit you could just add a script to act on the form once the page has finished loading :

```auto
$(window).load(function(){
 $('input[value="checkbox_1"]').prop('checked', true).change();
 $('input[name="firstname"]').val('Brian').change(); 
});

```

FYI these advanced form options are only available for forms on a paid Basic, Professional, or Enterprise marketing subscription.

---

<div class="post-metadata">

**Author:** ![mmetros](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mmetros/32/86357_2.png) [@mmetros](https://community.hubspot.com/u/mmetros)\
**Post date:** [April 11, 2020, 12:54am UTC](https://community.hubspot.com/t/how-to-embed-javascript-in-form/20000/5 "2020-04-11T00:54:54Z")

</div>

So right now in the global footer we are storing UTMs into a cookie.  
If this is at the footer, then we need to run the cookie extraction code when the form submits, correct? Otherwise if it runs, then there won’t be anything for it extract in the cookie, because the cookie setting script has not fired yet.  
Overall, I see what you’re saying. From what I understand, I have to:  
Somehow turn the embed script into an embed code, correct?  
Any chance you know why this works?

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [April 11, 2020, 1:09am UTC](https://community.hubspot.com/t/how-to-embed-javascript-in-form/20000/6 "2020-04-11T01:09:44Z")

</div>

Unless your cookie setting script is also inside a $(window).load function then it should run before the cookie extraction script does. But if the setting script _is_ in a $(window).load function, then yes, you will definitely need to use the form embed with the onFormSubmit function which tells the form ‘run this script when the form is submitted, but before sending the entry to Hubspot’.  
I’m not really sure what you mean by **turn the embed script into an embed code** as script _is_ code?  
Here’s a Hubspot article showing you where to get your form’s embed code:

> **[Set up and style a legacy form on an external site](https://knowledge.hubspot.com/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site)**
>
> Learn how to embed your legacy form on your external site or share a direct link to your form.

And this documentation shows you how to customize that embed code (to use the onFormSubmit function):  
[https://developers.hubspot.com/docs/methods/forms/advanced\_form\_options](https://developers.hubspot.com/docs/methods/forms/advanced_form_options)  
Then you just need to add it to your Wordpress page using either a plugin or a page builder module.

---

<div class="post-metadata">

**Author:** ![mmetros](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mmetros/32/86357_2.png) [@mmetros](https://community.hubspot.com/u/mmetros)\
**Post date:** [April 11, 2020, 1:14am UTC](https://community.hubspot.com/t/how-to-embed-javascript-in-form/20000/7 "2020-04-11T01:14:21Z")

</div>

We are using Google tag manager.  
Do you think I could run the script there? We always have the same hidden form fields to catch the 5 main UTM parameters.

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [April 11, 2020, 1:16am UTC](https://community.hubspot.com/t/how-to-embed-javascript-in-form/20000/8 "2020-04-11T01:16:04Z")

</div>

Certainly. Just make to sure to use the Window Loaded trigger.

---

<div class="post-metadata">

**Author:** ![mmetros](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mmetros/32/86357_2.png) [@mmetros](https://community.hubspot.com/u/mmetros)\
**Post date:** [April 11, 2020, 1:18am UTC](https://community.hubspot.com/t/how-to-embed-javascript-in-form/20000/9 "2020-04-11T01:18:18Z")

</div>

Perfect and then should I fire the cookie setting script in the page view event?

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [April 11, 2020, 1:23am UTC](https://community.hubspot.com/t/how-to-embed-javascript-in-form/20000/10 "2020-04-11T01:23:12Z")

</div>

Yes, Page View or DOM Ready should work for the setting script as they both fire before Window Load.

---

<div class="post-metadata">

**Author:** ![mmetros](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mmetros/32/86357_2.png) [@mmetros](https://community.hubspot.com/u/mmetros)\
**Post date:** [April 11, 2020, 1:30am UTC](https://community.hubspot.com/t/how-to-embed-javascript-in-form/20000/11 "2020-04-11T01:30:21Z")

</div>

Okay, here is what I’m thinking:  
1. Cookie setting code to be run in DOM event through GTM.  
2. Cookie retrieving code to be run in window.load event  
3. Regular embed short code in WordPress  
Do you foresee any issues here?

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [April 11, 2020, 1:31am UTC](https://community.hubspot.com/t/how-to-embed-javascript-in-form/20000/12 "2020-04-11T01:31:54Z")

</div>

Should work 👍

---

<div class="post-metadata">

**Author:** ![mmetros](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mmetros/32/86357_2.png) [@mmetros](https://community.hubspot.com/u/mmetros)\
**Post date:** [April 11, 2020, 1:37am UTC](https://community.hubspot.com/t/how-to-embed-javascript-in-form/20000/13 "2020-04-11T01:37:47Z")

</div>

Okay, I’ll keep you posted!  
One other question - does HubSpot cookie utm Parameters? I am trying to track the efficacy of my google ads campaigns and I’m afraid it won’t capture all my campaigns.  
It seems like it only catches first conversion campaigns for prospects. That’s the only reason why I’m taking this approach of storing utms into cookies and inputting them directly on the prospect.

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [April 11, 2020, 1:52am UTC](https://community.hubspot.com/t/how-to-embed-javascript-in-form/20000/14 "2020-04-11T01:52:23Z")

</div>

It doesn’t look like they do.

> **[Cookies set in your visitor's browser by HubSpot](https://knowledge.hubspot.com/privacy-and-consent/what-cookies-does-hubspot-set-in-a-visitor-s-browser)**
>
> Learn about the cookies the HubSpot tracking code sets in a visitor's browser.

You could always use Tracking Links in your campaigns to ensure Hubspot is gathering all the correct utm information.

> **[Create tracking URLs](https://knowledge.hubspot.com/settings/how-do-i-create-a-tracking-url)**
>
> Learn how to create, use, and analyze tracking URLs, which add parameters to your URLs and allow you to effectively track engagements with your marketing campaigns.

> **[UTM parameters - Analyze your site traffic with web traffic analytics](https://knowledge.hubspot.com/reports/analyze-your-site-traffic-with-the-traffic-analytics-tool#analyze-your-traffic-using-the-utm-parameters-tab)**
>
> Last updated: June 21, 2026 | Learn how to analyze your site traffic with the traffic analytics tool.

---

<div class="post-metadata">

**Author:** ![mmetros](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mmetros/32/86357_2.png) [@mmetros](https://community.hubspot.com/u/mmetros)\
**Post date:** [April 11, 2020, 2:01am UTC](https://community.hubspot.com/t/how-to-embed-javascript-in-form/20000/15 "2020-04-11T02:01:03Z")

</div>

So then how does original source data work? There must be a cookie that stores this data. I have ran my browser on incognito mode and used my HubSpot tracking url to land on my landing page. I then redirected to another page, but once I went to another form in our site, it extracted the correct original source.  
I bring this up because it’s storing this data in a cookie, but HubSpot documentation isn’t clear on this/ is not telling us what’s really going on. Unless I’m reading this wrong…

> **[Understand Original and Latest traffic source properties](https://knowledge.hubspot.com/properties/understand-traffic-source-properties)**
>
> Understand how HubSpot traffic source and drill-down properties classify visits by channel, including AI referrals.