Pre-fill Forms from Links or Webpages, Part 2: Using Hidden Fields

In a previous blog post, we described how you can pre-fill forms using URL parameters and a little Javascript. In that example, we generated URL parameters for First Name and Last Name in an email link, and when the recipient clicked the link, it pre-filled the corresponding form with their name. To take this concept a little further, we want to share another example where we used URL parameters to pre-fill a hidden field on a form to track the source of a lead.

SCENARIO:

When we create a content marketing campaign, we will have a dedicated landing page and form to collect leads generated by that campaign. In addition, it’s important for us to track where each lead originated. A hidden field for Lead Source easily tracks this information. We set the Lead Source value (“AdWords” for example) on the form and that information is automatically passed as the form is submitted.

And that works great – for one lead source. However, we will typically advertise a content piece on a variety of different online advertising platforms (Google AdWords, Facebook, LinkedIn, etc.).  Managing separate landing pages and forms for each ad platform would be a hassle, so we needed a way to capture different values for our hidden Lead Source field based on where the visitor came from. 

SOLUTION:

When we create URLs for our ads (often called destination URLs), we include a parameter for Lead Source along with our other tracking parameters. An example URL for an AdWords ad would look like this:

http://www.clickdimensions.com/ebook/?utm_medium=ppc&utm_campaign=ebook&leadsource=adwords

The leadsource parameter would change for each ad platform: 

http://www.clickdimensions.com/ebook/?utm_medium=ppc&utm_campaign=ebook&leadsource=facebook

Using the Javascript described in our earlier post, we are able to get the Lead Source parameter from the URL and insert the value into our form:

 

This Javascript code is inserted into the Code Editor window inside the Form Builder:

Step-by-step instructions for how to create the Javascript code for your specific form fields can be followed here.

Using Widgets

Note: If you are embedding your form into a web page using a widget, you will need to insert the Javascript code directly into the HTML of your page (with the widget code), not into the Code Editor. Remember to include the <script> tags:

RESULT:

Now, when a visitor clicks one of our ads, the Lead Source is automatically captured in CRM. This allows us to easily measure and evaluate the traffic coming from each advertising platform for each campaign.