Does your company rely on web forms to generate users, customers, or leads? Ever wished you could capture additional information such as how the visitor found you, what referral code they used, or what marketing campaign brought them there?

Cartoon about recognizing people

Having that data can help you see, track, and analyze which marketing campaign, referral link, promo code, etc, is responsible for which lead or form completion. It would allow you to give proper credit to the referrer, promotion, or campaign and adjust your strategy based on the data.

You can do this by using URL parameters in links and inserting them into web forms.

For example, if you use UTM parameters in your email campaign links, LinkedIn campaign links, or in any other links to specify the marketing medium, source, and campaign, you might want to see those parameters in the form data along with the visitor’s information:

Lead Email Marketing Source Marketing Medium Marketing Campaign
john@startupr.io google cpc case-study
m.b@acme.com adroll banner retargeting
r@leads.com google cpc launch

Or, if you use custom URL parameters to differentiate traffic from affiliates, referrers, or promotions, it’s helpful (perhaps necessary) to capture that information with every form submissions:

Lead Email Referrer Code
john@startupr.io 471249
m.b@acme.com 957102
r@leads.com 471249

It’s straightforward to update your link URLs in marketing campaigns, but what about the second part: Capturing the URL parameters that brought a visitor in, and submitting them alongside form submissions?

Although it sounds like a simple function, I haven’t found any solution that is:

  1. Free or inexpensive.
  2. Super easy to implement, even for non-technical users.
  3. Flexible enough to work with any URL parameter, form, lead management tool, and marketing platform.

I tried open-source scripts, form services, analytics tools, and marketing platforms, but nothing met the above requirements.

Cartoon about finding the source of leads.

It’s no wonder that many organizations still don’t have an accurate way of seeing where their new users or leads are coming from.

Further on I will show you how to save URL parameters in web forms in two easy steps. It’s free, takes just a few minutes to set up, and works with any form and URL parameter.

But first, the alternatives and their challenges…

Challenges with Capturing URL Parameters

There are already several options for capturing these URL parameters with form submissions, but each of them has significant downsides that could make them difficult, time-consuming, or costly to implement.

Marketing platforms, form tools, and landing page builders can capture URL parameters, but only if they’re present on the page—if a visitor views more than one page, then URL parameters will not be saved. Unfortunately this only works if the visitor completes the form on the same page on which they landed, without navigating away. This is fine for isolated lead-capture pages, but nothing else.

Also, marketing platforms are not a trivial expense. It’s not sensible to buy and implement one just for this use case. What’s more, some platforms and form tools treat URL capture functionality as a premium add-on that costs extra.

Analytics tools can recognize, parse, and report some or all URL parameters, but they don’t show it side-by-side with form data. For example, Google Analytics only parses UTM parameters, and it does not allow you to save personal information from forms. That leaves you with only aggregated counts such as this:

Google Analytics Report: Goal Completions by Marketing Source, Medium, and Campaign

This tells you the volume of conversions by marketing source, but nothing about their quality. If you’re collecting leads for a B2B product and that one form completion came from a Fortune 500 company, you’d want to know that before deciding which campaign to cancel and which campaign to scale!

Other analytics and conversion-tracking tools may be able to capture both form data and URL parameters from a visitor’s session, and display them in the same report, but if you don’t already have those tools implemented and configured then that means spending time and money on additional tooling, implementation, and training.

JavaScript plugins that capture UTM parameters such as utm_source don’t work with custom URL parameters such as referral, promo, search, and so on. Also, those scripts are provided as-is, without much context or explanation, and therefore require a developer or technical marketer to spend time implementing and troubleshooting them.

Now let’s get to the easier, cheaper, more flexible solution…

Capture URL Parameters in Forms the Free and Easy Way

1. Add the this code to every page of your site, or send it to your developer.

Place this script just before the </body> HTML tag on every page of your site, including pages with forms:

<script>
var queryForm = function(settings){
  var reset = settings && settings.reset ? settings.reset : false;
  var self = window.location.toString();
  var querystring = self.split("?");
  if (querystring.length > 1) {
    var pairs = querystring[1].split("&");
    for (i in pairs) {
      var keyval = pairs[i].split("=");
      if (reset || sessionStorage.getItem(keyval[0]) === null) {
        sessionStorage.setItem(keyval[0], keyval[1]);
      }
    }
  }
  var hiddenFields = document.querySelectorAll("input[type=hidden]");
  for (var i=0; i<hiddenFields.length; i++) {
    var param = sessionStorage.getItem(hiddenFields[i].name);
    if (param) document.getElementById(hiddenFields[i].name).value = param;
  }
}
queryForm();
</script>

Or you can use this minified version, which will load slightly faster and will take up slightly less space:

<script>var queryForm=function(e){var t=!(!e||!e.reset)&&e.reset,n=window.location.toString().split("?");if(n.length>1){var r=n[1].split("&");for(i in r){var o=r[i].split("=");(t||null===sessionStorage.getItem(o[0]))&&sessionStorage.setItem(o[0],o[1])}}for(var s=document.querySelectorAll("input[type=hidden]"),i=0;i<s.length;i++){var a=sessionStorage.getItem(s[i].name);a&&(document.getElementById(s[i].name).value=a)}};queryForm();</script>

This script saves any parameter it finds in a URL of a visitor’s session, and saves it for the entire duration of the visit.

Optional: If you want the URL parameters to be reset after they are submitted with a form, change queryForm(); to queryForm({reset: true});.

Note: This plugin requires jQuery. If your site is running on WordPress or any modern CMS, it probably already has jQuery. If you’re not sure, view the HTML of any page on your site and search for “jquery”—or just ask your developer.

2. Add hidden fields to your lead forms.

Add a hidden field (or several) to any form on your site with a name and ID that matches the URL parameter you want to capture.

For example, if you want to capture the value of the ref parameter, you could add the following field to your form:

<input type="hidden" name="ref" id="ref" value="">

Your visitors will not see this field, but it will automatically be filled in with the value for ref in the link they clicked to arrive at your site.

As another example, the following form has three hidden fields to capture the standard UTM parameters and include them with the form submission:

<form action="#" enctype="text/plain">
<label for="email">Email</label>
<input type="email" name="email" placeholder="Email" required>
<input type="hidden" name="utm_source" id="utm_source" value="">
<input type="hidden" name="utm_medium" id="utm_medium" value="">
<input type="hidden" name="utm_campaign" id="utm_campaign" value="">
<input type="submit" value="Submit">
</form>

That’s it!

Now start using URL parameters in your marketing links. When someone clicks one of those links, every URL parameter and its value will be saved for the duration of their visit.

Parameters look like ?parameter=value at the end of URL, where parameter is the name of your parameter and value is anything you want.

Example:

https://www.example.com/?ref=9937

You can add multiple parameters, separated by an ampersand (&):

https://www.example.com/?ref=9937&utm_source=blog&utm_medium=link&utm_campaign=whitepaper

If you want to use standard UTM parameters—utm_source, utm_medium, utm_campaign, utm_content (optional), and utm_term (optional)—for marketing links so that analytics tools can recognize them, you can use this handy URL builder.

You will then see exactly which links led to form submissions. You can use this to track:

  • Marketing campaign sources of new users, customers, or leads.
  • Referrers of new users, customers, or leads.
  • Which promo codes result in form completions.
  • What on-site search queries lead to conversions.
  • Anything else…

If you’re handy with JavaScript, then you can view, fork, and submit improvements to the script on the public GitHub project.

PS - Liked this article? I write one every month or so, covering lessons learned on B2B startup growth. Don't miss the next one: