topic Re: How to embed javascript in form in Lead Capture Tools

How to embed javascript in form

mmetros — Fri, 10 Apr 2020 23:05:45 GMT

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?

Re: How to embed javascript in form

alyssamwilie — Sat, 11 Apr 2020 00:22:01 GMT

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

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

Re: How to embed javascript in form

mmetros — Sat, 11 Apr 2020 00:35:33 GMT

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?

Re: How to embed javascript in form

alyssamwilie — Sat, 11 Apr 2020 00:49:27 GMT

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 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 :

$(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.

Re: How to embed javascript in form

mmetros — Sat, 11 Apr 2020 00:54:54 GMT

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?

Re: How to embed javascript in form

alyssamwilie — Sat, 11 Apr 2020 01:09:44 GMT

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:
https://knowledge.hubspot.com/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site

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

Then you just need to add it to your Wordpress page using either a plugin or a page builder module.

Re: How to embed javascript in form

mmetros — Sat, 11 Apr 2020 01:14:21 GMT

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.

Re: How to embed javascript in form

alyssamwilie — Sat, 11 Apr 2020 01:16:04 GMT

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

Re: How to embed javascript in form

mmetros — Sat, 11 Apr 2020 01:18:18 GMT

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

Re: How to embed javascript in form

alyssamwilie — Sat, 11 Apr 2020 01:23:12 GMT

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

Re: How to embed javascript in form

mmetros — Sat, 11 Apr 2020 01:30:21 GMT

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?

Re: How to embed javascript in form

alyssamwilie — Sat, 11 Apr 2020 01:31:54 GMT

Should work 👍

Re: How to embed javascript in form

mmetros — Sat, 11 Apr 2020 01:37:47 GMT

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.

Re: How to embed javascript in form

alyssamwilie — Sat, 11 Apr 2020 01:52:23 GMT

It doesn't look like they do.

https://knowledge.hubspot.com/reports/what-cookies-does-hubspot-set-in-a-visitor-s-browser

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

https://knowledge.hubspot.com/settings/how-do-i-create-a-tracking-url
https://knowledge.hubspot.com/reports/analyze-your-site-traffic-with-the-traffic-analytics-tool#analyze-your-traffic-using-the-utm-parameters-tab

Re: How to embed javascript in form

mmetros — Sat, 11 Apr 2020 02:01:03 GMT

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...

https://knowledge.hubspot.com/reports/what-do-the-properties-original-source-data-1-and-2-mean