Unbounce Answers/Next Steps/Building Your Landing Pages

Pre-Filling a Form with URL Parameters

Oli Gardner
posted this on October 21, 2010 05:00 PM

With Unbounce, you can easily pre-fill your form fields with URL parameters (also known as query parameters).

What's a URL parameter you ask?

Well, among other things, a URL parameter is a way to pass data in a link to a web page. You can use URL parameters  to track different metrics in services like Google Analytics or in this case, to pre-fill your form.

A URL parameter has two parts. A variable name and a value. In example below, "coupon" is the variable name and "50_2013" is the value:

http://unbouncepages.com/puravida?coupon=50_2013

 

Try it out!

Let's say you want to pre-fill a coupon code on your form. Great.

Using the example above, you'd just need to add a "coupon" field to your form and it would automatically pre-fill with the matching query parameter. Like this:

Screen_Shot_2013-09-13_at_4.14.01_PM.png

 

A popular use-case for this is when you're using google's UTM tracking...

Google has a popular URL building tool for tagging your links with useful data (which also happens automatically if your Google ADwords and Google Analytics accounts are linked). This will result in some paramaters being tacked onto the end of your Unbounce page URL which might look like this:

http://try.myproduct.com/landing-page?utm_source=google&utm_medium=ppc

 

To capture this data in your form, just create a hidden field for each tag and give them the same name as the tag, so for this example you'd create the following hidden fields:

Picture_1.png

 

Comments

User photo
Bert Schiettecatte

very interesting, but this only works if the URL points to the landing page that holds the form. 

what if the landing page was some other page, and the visitor clicks through to the page with the form where you want to capture the utm variables? 

it seems there are ways to read the analytics cookie using javascript and store the variables in the hidden fields, and it even seems jquery has a cookie plugin that helps with this ... can you post an example for this scenario? 

August 01, 2011 01:21 AM
User photo
Jens Petersen

But it doesn't work with select-fields! :(

November 28, 2011 05:59 AM
User photo
James Laughlin

Good information, but it's worth saying that if you do this and open the page to look at the source you won't see the data in the hidden fields.  

You actually have to submit the form and Unbounce will pull the data out of the form and submit it.

November 30, 2011 08:40 AM
User photo
Amit Vemuri

There's an issue with the pre-populated fields. It doesn't remove or convert escaped chars. Eg. if the url was

unbouncepages.com/pages/XXX/?name=sid%20mitra

the name field gets filled with "sid%20mitra", which is technically accurate but not really correct. 'Cos one would ideally want to see the %20 converted to " " or space

December 14, 2011 04:15 PM
User photo
Carter Gilchrist
Unbounce

Hey Amit, sorry for the delay getting back to you. We're going to dig in to this issue and fix it up as soon as we can, thanks for reporting it!

December 20, 2011 05:35 PM
User photo
Matalin Hatchard

I would like to echo Bert Schiettecatte's comment. would be unusual that they go directly to the contact form, normally hit the landing page and click through to my contact form. how can I pass those parameters onto the clickthough url automatically? I would see it working like this - the homepage would have links that would be standard, and a javascript code would look for url parameters. If they existed it would append them onto any link clicked through. The utm's could then be easily parsed by the contact form. can you point me in the direction of a script like that?

January 13, 2012 09:15 AM
User photo
James Stinson

No update on this?

June 26, 2012 02:56 PM
User photo
Rob Schutz

Ditto to Bert and Matalin's comments - any way to automatically append the originating utm's onto outgoing links?? Would be really helpful to track the originating source all the way through the conversion funnel from my own DB.  Need to compare against purchase values, frequency, etc.

January 10, 2013 08:49 AM
User photo
Ryan Engley
Unbounce

Hey guys - we've got some script that can pass the GET parameters on with click through though you've got to tweak it for your own pages.  If you send us an email to support@unbounce.com with your question and a link to your page, we can that script your way.  We base a lot of our product development on feature requests so if we hear a lot of demand for this, we may build it directly into our app.

January 10, 2013 03:25 PM
User photo
Adrien O'Leary

Hi all. Question for Carter and Ryan. Have you considered implementing - or documenting - a way to get utm parameters from the Google Analytics cookie as described at http://cutroni.com/blog/2009/03/18/updated-integrating-google-analy.... Justin Cutroni now works at Google and he has confirmed that what is described on the page respects the terms of service for Google Analytics. Thanks.

March 21, 2013 06:30 AM
User photo
Mathabatha Sexwale

I have the exact same question as Adrien. If you could let me know more about that it would be great.

It helps save us advertisers time, instead of having to tag all the ads separately.

Essentially if you could reveal to me what function you use to populate hidden fields, then that might give me a solution.

July 05, 2013 04:42 AM
User photo
David Bosley

What parameter do I add to the hidden field to capture the entire referring URL?

August 04, 2013 01:09 PM
User photo
Ryan Engley
Unbounce

Hey David - it depends. You can only capture the referring URL if it's contained in your page's URL (usually as a UTM parameter if you're tracking with Google AdWords/Analytics). In that case, the hidden field needs to be the same name as the URL parameter you want to capture.

August 04, 2013 09:26 PM
User photo
Anna Lewy

Hey guys

This script will populate a select field AND deal with the %20 space thing.

Just replace "value_here" with your field name.

Cheers

Naomi

<script type="text/javascript">

$.urlParam = function(name){

    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);

    if (results==null){

       return null;

    }

    else{

       return results[1] || 0;

    }

}

 

$(document).ready(function(){

                $('#new_home_consultant').val(decodeURIComponent($.urlParam('value_here')).replace(/\+/g,'%20'));

});

</script>

September 26, 2013 12:05 AM
User photo
Anna Lewy

Sorry, my code still says "new_home_consultant" which would be where you replace with your field name.

September 26, 2013 12:06 AM
User photo
Ryan Engley
Unbounce

Hey Naomi - Thanks for sharing that. I updated your code so it matches your instructions now.

September 26, 2013 11:43 AM
User photo
Mark Hamilton

What's the point of this?

And what about Zoho CRM integration, will it work?

December 06, 2013 05:14 PM
User photo
Johnny Opao
Unbounce

Hi Mark - There are a few cases in which you might wish to use this. One would be for passing the Googles utm parameters above. Another would be if you wish to use a multi-step form and pass your field data to another unbounce page like so:

http://support.unbounce.com/entries/20279381-How-to-set-up-a-multi-...

As for Zoho, if you are passing parameter fields to your forms, those values can be sent to  Zoho through your integration.

December 10, 2013 11:28 AM
User photo
Mark Hamilton

Thanks Johnny. I should have been clear - I meant to say what's the point of passing the UTM params to Unbounce.

December 10, 2013 12:30 PM
User photo
Johnny Opao
Unbounce

Hi Mark - No worries. UTM parameters are used keep track of the effectiveness of your marketing strategies and sources. By tagging your links with utm parameters you can use this information to know the source of the traffic and the campaign.

December 10, 2013 01:18 PM
User photo
Mark Hamilton

What I'm trying to say is..

UTM params will show up in Google Analytics. So, if I have an ad formulated with UTM params that when clicked will land on an Unbounce landing page with the UTM params (and as long as Unbounce is integrated with Google Analytics code), will show up in GA anyway. 

Armed with that info, why do I need to pass the UTM params that are already in an URL twice by sending them to Unbounce via hidden fields?

December 11, 2013 10:16 AM
User photo
Johnny Opao
Unbounce

Sorry about that Mark, misunderstood you once again!

Passing those parameters to Unbounce allows you to keep track of your sources and campaigns outside of Google Analytics. So if you set unbounce to send your leads to your inbox, you can view the utm parameters straight from that email.

One of the larger reasons would be if your integrating with one of our partners (such as Salesforce, Infusionsoft, mailchimp...). These services provide lead management, auto-responders, and other tools in which passing those UTM parameter would give you better visual right from their system. It's sort of like a paper trail that helps you keep track of the source when your moving farther away from the starting point.

Hope that was the answer you were looking for Mark, if not let me know and i'd be happy to clarify!

December 11, 2013 05:44 PM
User photo
Mark Hamilton

Johnny, 

 

You nailed it.

 

Thanks!

December 12, 2013 01:08 PM
User photo
Nefer Lopez

Hi Johnny, I'm unable to change my URL to include the UTM ID's because "The (URL) path must be lowercase, and can only contain dashes or underscores."

I was hoping to setup UTM ID's and have it feed to Infusionsoft.

Any suggestions on working around this issue?

Thanks!

March 11, 2014 07:32 AM
User photo
James Kafouris

I hate the Forms in my Get response Auto responder so Id like to use the Form & Buttons in Unbounce but Im not quite sure if there is an option for me to paste my HTML code of JAVA script code so that when womeone enters their name and email it then feeds from unbounce to Get Response and activates my follow up series plus stores the data instead of me having to download csv and upload the data manually.... CAN ANYONE HELP >??? 

March 11, 2014 08:51 AM
User photo
Johnny Opao
Unbounce

Hey James - There's no way within our platform to export your unbounce form and buttons to HTML. If you are interested in using Unbounce landing pages with GetResponse you could send the leads over using a webhook. It requires creating a script to handle the process. Alternatively if you want to save time scripting the webhook you could try using Zapier. They have a ready to go solution that connects Unbounce to GetResponse:

https://zapier.com/zapbook/unbounce/getresponse/14087/save-unbounce...

March 11, 2014 01:54 PM
User photo
Rob Yoegel

Does unbounce have a solution yet that shows what the referrer/orginal traffic source was for each form submission?  Is there a way that unbounce tracks the referrer/traffic source from the time that a visitor enters the website to the time that the visitor completes a unbounce form submission?   I would like to see this data show up with each form submission: google organic "keyword",   google adwords "keyword", direct, or bing ads "keyword". 

April 23, 2014 08:05 AM
User photo
Quinn Omori
Unbounce

Hi Robert - this isn't built in and it won't capture the data exactly as you've described above, but you can add the entire referrer string by adding a hidden field to your form and some custom javascript to write the referrer string into that field. You can find a how-to on setting that up here: http://support.unbounce.com/entries/20019863-How-do-I-capture-refer...

April 23, 2014 02:28 PM
User photo
Lou Sturm
Unbounce

Hey Robert! I also wanted to chime in and ask if you could be so kind as to share your use case? Typically, marketers using Unbounce track referral sources in Google Analytics, or another third party tracking system. The better we can understand why customers need it in app the more likely we'll be able to bump this up on our Product Roadmap. Thanks in advance for taking the time to share!

April 23, 2014 02:39 PM
User photo
Rob Yoegel

John Doe comes to xyz.com from Google Adwords, or Google organic, or Twitter, etc. 

He visits two, three, four pages and then clicks on a link to a form (i.e., forms.xyz.com) that has a utm_source value. 

In Unbounce, the utm_source value is captured (great), but not the original source of the site visit to xyz.com.

April 24, 2014 04:06 AM
User photo
Tilen

Hi,

What if we want to write all the utm parameters to one field?

So example: link = www.xoxo.com?utm_source=xyz&utm_medium=xyb

We want this to appear in one hidden field named "ADSOURCE" so it would appear like this: #xyz#xyb

Thanks for your answers

September 26, 2014 02:39 AM
User photo
Johnny Opao
Unbounce

Hey Tilen - Our forms are set to auto-pull a single parameter value into a single Unbounce field.

However there's some short JS needed to pull the entire string into a field

<script>

var qParameters = window.location.search;

$('#fieldName').val(qParameters);

</script>

Replace #fieldName with the field ID you wish to pull the parameters into.

September 26, 2014 09:28 AM
User photo
Steve Fabry

I am sending an email marketing campaign. Can I pre-fill a form with an email address if a user opens the email and clicks through to the Landing Page? 

October 08, 2014 10:56 AM
User photo
Quinn Omori
Unbounce

Hi Steve - if your email marketing software supports dynamic tags, you can append those to the link in your email as a parameter.

For example, MailChimp does this with merge tags. You can use the email merge tag in MailChimp and append it to the link in your email like so:

http://www.yourlandingpageurl.com?email=*|EMAIL|*

MailChimp replaces *|EMAIL|* with the email address in your MailChimp database for that subscriber and provided your Unbounce field is named "email", Unbounce will autofill your form with that value.

The set-up would be similar in other email marketing systems as well--they'll just have their own dynamic tags.

October 08, 2014 11:10 AM
User photo
Marcus Stoll

Hi all -

In our business we maintain two versions of parameters: the original (how someone first came to us) and their recent parameters. 

Writing the original parameter to the field makes total sense, and I've confirmed that it works on my landing page. However, I'd also like to have that same parameter write to a second field (let's go with source, and call the recent field utm_source_recent for now).

How would I go about accomplishing this, short of adding another parameter to the URL that's linking to my page (I don't want to duplicate all 4-5 parameters and have the URL be super long)? Is there a script that would accomplish this for me?

Thanks!

November 26, 2014 08:29 AM
User photo
Quinn Omori
Unbounce

Hi Marcus - I'm not sure that I quite understand what you're looking to do.

You mentioned two different parameters (original vs. recent), but later you mention writing the same parameter to two different fields.

If the original and recent parameters are both the same for this page, it would probably easier to handle the duplication when you push the data from Unbounce to whatever mail program/CRM/etc that you're using. How are you handling the data after it's collected in Unbounce?

November 28, 2014 09:38 AM
User photo
Marcus Stoll

I'm passing the data immediately to Marketo through a script. And to clarify, it is the same parameter, but that same value should go to two different fields. The use case I'm trying to handle is as follows as an example:

URL: www.test.com/test.html?utm_adgroup=LinkedIn

Then, instead of just having a single utm_adgroup field populate with "LinkedIn", there's a second field (utm_adgroup_recent) that I want to also populate with "LinkedIn".

The problem with handling this on the CRM side is that this will not work when someone is already a known lead. The Original PPC information does not get overwritten when that person submits a second form. So that person's data could be utm_adgroup = "Adwords" from a form fillout two months ago, but that field can only be written to once. So, even though they filled out one of my Unbounce forms today with utm_adgroup as "LinkedIn", their info would still show Adwords. I was trying to figure out a way to do this through javascript on the front end so that when the form is submitted both hidden fields are populated.

Long story short, the single parameter of utm_source should feed into two hidden fields.

December 08, 2014 01:39 PM
User photo
Marcus Stoll

Nevermind, figured out a way to solve this. I was originally trying to pass the value from utm_source to two fields: Original_PPC_Source__c and PPC_Source__c (was attempting to do this through the code provided here: http://developers.marketo.com/blog/integrating-unbounce-and-marketo/).

Ended up just creating fields in Marketo that matched the parameter names exactly: utm_source, utm_campaign, etc etc.

Then, created some data management workflows in Marketo to, when the data value of utm_source changes, overwrite the value in Original_PPC_Source__c and PPC_Source__c. However, in the admin section, I block Original_PPC_Source__c from data value changes, so that one will remain the original and the recent one will update.

Sorry for the confusion. Hope this makes sense/potentially helps out anyone else in the same situation.

December 09, 2014 10:02 AM