Pass cookie information to the form

[#1]

Hi everybody!

We have a few hubspot forms on our website and are able to pass hidden fields that allows us to tack them in SalesForce.

When we run certain marketing campaigns, we use a cookie with a “campaign ID”. We can pass a Campaign ID from HubSpot using a hidden fields though that limits us to one ID per page/ form when in reality it may be different depending on which campaign the user arrived via. The form lives prominently on the site and is often navigated to - once a form is submitted, it uses the hidden Campaign ID. This doesn’t allow us to see which marketing campaigns actually resulted in the form being filled out.

How do we pass the cookie specific campaign id to a hidden form field?

Thanks in advance!

[3PETE]

@Veemer You can accomplish this with client side Javascript. Here is a link to help you read up on it. Essentially you just need to grab the cookie information with Javascript and then place the value into the hidden form field.

https://www.w3schools.com/js/js_cookies.asp

[#3]

Great, thanks for replying. Any chance you have an example of the script… I’m guessing we’re not the first ones to need to grab cookie info and pass it via a hidden form field. Our dev team is a bit over worked so if I could forward it to them to implement rather than having them write it would probably make a difference.

[3PETE]

@Veemer I don’t have a copy of the script on hand. If you provide the steps for your developers they should be able to implement this rather quickly.

[JonW]

Hi @Veemer,

One thing we do which might make this easier for you is to use URL parameters to pass the campaign ID. Simply name the hidden field the same as the URL parameter and it will auto populate. I use a default value incase the person found the site organically. This way you can avoid asking the Dev Team to help you.

The downside is that it doesn’t store across browsing in a sesson, i.e. they come to your landing page, click first to your homepage, then return to the landing page to fill out the form.

[#6]

Hey guys,

We're wanting to do something similar so we built the following cookie, but it's not passing the values into the hidden form fields. Could someone give me any pointers?

<?php
$utm_source=$_GET['utm_source']; //the value from the url

setcookie("utm_source", $utm_source, strtotime( '+30 days' )); 
$utm_medium=$_GET['utm_medium'];

setcookie("utm_medium", $utm_medium, strtotime( '+30 days'));

$utm_campaign=$_GET['utm_campaign'];

setcookie("utm_campaign", $utm_campaign, strtotime( '+30 days'));

$utm_term=$_GET['utm_term'];

setcookie("utm_term", $utm_term, strtotime( '+30 days'));

$utm_content=$_GET['utm_content'];

setcookie("utm_content", $utm_content, strtotime( '+30 days'));


?>

[Derek_Gervais]

Hi @chandlerwillman,

I'm not entirely familiar with PHP, so bear with me. That code appears to create a couple of cookies, but I'm not seeing any code that appears to input the values into a form field, or otherwise pass the values into HubSpot. This topic was originally about passing information from cookies into a hidden form field; is that what you're trying to do?

If that's the case, you should skip creating cookies out of the query parameters and instead just add hidden form fields and put the query parameters into them directly. Like JonWeidberg said above, if a form field has the same name as a query parameter, HubSpot will auto-populate that form field with the query parameter value.

[#8]

I understand that would be the solution of we sent people over to our landing page with the form available right there, but here's our use case:

Someone lands on our home page with a URL like /home/?utm_source=adwords&utm_campaign=branded

Then the person browses the website and ultimately arrives to our contact us page. They fill out the form and we want those parameters to be captured into the custom fields "utm_source" and "utm_campaign".

Right now those utm parameters are getting lost as soon as they leave the intial page (of course, they're picked up by hubspot's original source fields but we're being really picky about how that data is parsed here)

[robertainslie]

@chandlerwillman - HubSpot forms won't read custom cookies to include in hidden fields. You're likely setting the cookies properly, but need to write JS to read the cookies and then set the values into hidden form fields.

I'd recommend including a light library like this: https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework

Then, use the docCookies.getItem(name) to get each of your cookie values. Finally, your js would do somethign like:
$(window).load(function(){
var campaign = docCookies.getItem('utm_campaign')
$('[name=utm_campaign]').val(campaign).change();
})

[keegan1]

@chandlerwillman Did you ever get this resolved? I am looking for the same solution and have had no luck.

[damshaw]

Hi,

I need to do the same... store UTM parameters in a cookie then populate the HubSpot form when the user visits the form page. I did this with gravity forms but will need to refactor the code to get it working with Hubspot.

A

[IsaacTakushi]

Welcome, @damshaw.

Are you encountering specific technical roadblocks? This thread discusses general ways to write values to custom cookies, retrieve the values, and write the values to HubSpot form fields, but I'll need more specifics about your challenges to advise further.

[damshaw]

Hi and hope you are well!

I am having trouble getting the custom cookie data in the Hubspot forms. I am trying the below code. The console log shows the correct value in the campaign variable but nothing shows in the forms input field. 

The code below should work, right? or am I missing something?

jQuery(window).load(function () {
    let campaign = $.cookie('__fcutmz');
    console.log('campaign', campaign);
    document.getElementsByName('last_click_source__c').value = campaign;
});

 Cheers

Adam

[IsaacTakushi]

Hi, @damshaw.

If you're using jQuery, I don't believe .value is valid. I'd also replace document.getElementsByName('last_click_source__c') with a jQuery selector.

Try using val() and change() event like the following (as recommended in HubSpot's documentation😞

jQuery(window).load(function () {
    let campaign = $.cookie('__fcutmz');
    console.log('campaign', campaign);
    $('input[name="last_click_source__c"]').val(campaign).change();
});

[damshaw]

Hi @IsaacTakushi ,

Thanks for the response, I worked out my issue and I should have worked this out earlier... I had not switched my form to show to raw HTML. Now the form is set to raw all fields are populating as expected.

Cheers

Adam

[RafiPN]

Hi @damshaw I see that you had problems passing the UTMs to the form until you set the forms to be raw HTML. Is that really necessary or will the UTMs won't work if you use the stylized Iframes Hubspot forms? 

[joshuaharvey]

Where does this jquery need to be inserted? 

[IsaacTakushi]

Welcome, @joshuaharvey.

It depends on your use case, but arguably the easiest implementation is to put it within the HubSpot form embed code, as shown in this documentation.