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 H

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