Passing URL Parameters Through a Form in Classic Builder

Follow

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 Google Ads, and in Unbounce to pre-fill your form.

For details on how to set this up in Smart Builder, see this article: Passing URL Parameters Through a Form in Smart Builder.

Unbounce forms pass along data only when inputted into a form field. To pass on your incoming URL parameters, you’ll need to set up hidden fields to capture the incoming data. In this article, you will learn how to set up hidden fields for Classic Builder.

Before you get started, here are a few universal rules to keep in mind when setting up and troubleshooting your funnel:

  • Hidden Field IDs must match your parameters to the letter, and are case-sensitive. If there is any variation the value won’t be captured/passed through
  • Visitors must arrive on the page using the URL containing your desired parameters in order to capture or prefill any data in your Unbounce form

Note

If you are concerned about GDPR compliance or Google Analytics privacy policy please refrain from appending personally identifiable information to the URL on form submissions.

Setting Up Hidden Fields in Classic Builder

  1. Add hidden field(s) to your Classic Builder form by double-clicking your existing form and selecting the Hidden Field option listed in the left-hand column of the form editing popup.

    Adding hidden field to form in Classic Builder
  2. Name your field(s) the same as your incoming parameters. These are case-sensitive:

    Adding field name and ID to form in Classic Builder
  3. Click Done on the bottom right-hand corner of the form editing popup.
  4. If you’re sending traffic to another page instead of a form confirmation dialogue box, check the option to Append form data to URL from the properties panel on the right-hand side of the Classic builder:

    Append form data to URL in Classic Builder
  5. Save and Republish your landing page. 

Capturing UTM or GCLID Values Using Hidden Fields

Tagging your URLs is a great way to pass detailed information about your campaign or traffic sources back to your Google Ads or Google Analytics account. You can use URL parameters to manually tag UTM values (utm_source, utm_medium, etc), or to auto-tag using GCLID values.

Read through Google’s documentation on best practices for tagging your URLs and our documentation highlighting some key differences between Auto-Tagging & Manual Tagging.

Whether you are using Smart Builder or Classic Builder, you can use Hidden Fields to capture UTM or GCLID values in your Unbounce form by following these steps:

  1. Add hidden field(s) according to the relevant builder instructions above.
  2. Name these parameters according to what you want to capture These are case-sensitive. Below are some of the most commonly used parameters:
    • utm_source
    • utm_medium
    • utm_campaign
    • utm_term
    • utm_content
    • gclid
  3. Leave the Default Value blank.
  4. Click Done to save the updates.
  5. Save and Republish your landing page.

Testing URL Parameters

To test and see if the parameter values are being captured correctly, submit a test lead to the form while on the custom URL containing the parameters, and input some test values.

For example, suppose the URL for this custom campaign is my.amazinglandingpage.io/?utm_source=google&utm_medium=email&utm_campaign=fall_sale, and the designated hidden fields have been set up in your Unbounce form.

After submitting a test lead on this URL, the hidden fields in your Unbounce form will capture the following UTM parameter values: google, email, and fall_sale.

These values will appear in the Leads Table:

UTM parameters listed in the leads table

Pre-filling a Form with URL Parameters

Just like hidden fields, you can also pre-fill visible form fields using URL parameters (also known as query parameters).

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

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

Let's say you want to pre-fill a coupon code on your form. Using the example above, you'd want to add the "coupon" field to your form, and it would automatically pre-fill with the matching query parameter. Like so:


prefill-form-setup.png

 A form pre-filled using a parameter

Pre-filling your form fields requires visible form fields. Therefore, you do not need the use of hidden fields, since the goal is to pre-fill form fields that are visible to your users. 

Glossary

Parameter: A key that is used to capture information about a click a visitor has made to get to another page. This can be anything that matches your Field ID or is your UTM parameter. This can be anything, so long as It matches across the board from your ad to your CRM.

Value: This is what the customer and their experience fill out within your form. This can be their name inputted in a field or a UTM Value that you preset in your Ads link.

Anatomy of a URL Parameter: landing page url?parameter=value

Related Articles 

Using URL Parameters: Google Auto-Tagging/Manual Tagging

Passing Incoming URL Parameters to Outgoing Button Links

Google’s Guide to URL Builders

Getting Started with Custom URLs

Benefits of Auto-Tagging (vs Manual Tagging)