How to Add Hidden Fields to Your Lead Forms

You’ve done it! After carefully defining your customer personas, you’ve crafted a stellar marketing strategy to bring them to your site. Your landing page is a work of art. Visitors can’t help but want to fill out your forms and are itching to sink their teeth into your products and services. Leads are up, and you’re looking like a rockstar.

But wait, how do you know what marketing channels are actually driving these leads? Furthermore, are any of the leads that you’re driving from your marketing channels actually leading to closed deals? What do you do now? Fortunately, there is an answer to your question. At Metric Theory, we have detailed the importance and value of backend tracking in numerous prior blog posts. We even showed you how to store the visitor information in a cookie so that it’s not lost when they navigate throughout your site.

Now that you have the source information, it’s time to give it a place to go. Enter the hidden form field. You’re probably familiar with standard form fields. Any website you’ve visited that has places to enter information — be it open entry, a dropdown, checkbox, or otherwise — is a field within a form. We can also create hidden fields. As the name implies, these fields are hidden, but only from the site visitor. The browser and any code that interacts with it can see them quite plainly.

Each form will have its own requirements for how to add hidden fields. In this blog, we’ll review two common ones: Salesforce Web-To-Lead and Gravity Forms on WordPress.

Salesforce Web-To-Lead

Let’s consider a simple form with just First Name and Last Name. With this form, we want to pull in the URL parameter GCLID, which Google Ads automatically appends.

In my Salesforce account, I have added a custom field to my lead called GCLID to house the GCLID information.

1. Navigate to Setup and search for Web-To-Lead
2. Click the Create Web-to-Lead Form button

3. Select the fields to include in your form

4. Click Generate

When I first create my web-to-lead form, it will look something like this. I’ve excluded any portions irrelevant to this example, so your live setup will include additional text.

<form action=”https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8″ method=”POST”>

<input type=hidden name=”oid” value=”************”>

<input type=hidden name=”retURL” value=”http://”>

<label for=”first_name”>First Name</label><input id=”first_name” maxlength=”40″ name=”first_name” size=”20″ type=”text” /><br>

<label for=”last_name”>Last Name</label><input id=”last_name” maxlength=”80″ name=”last_name” size=”20″ type=”text” /><br>

GCLID:<input id=”12345abcd” maxlength=”255″ name=”12345abcd” size=”20″ type=”text” /><br>

</form>

Since I don’t expect users to enter this value, there is no reason for them to see it. There are two changes I’ll need to make to hide it.

1. Change ‘type=”text”’ to ‘type=”hidden”’
2. Remove the label text: “GCLID:”

<form action=”https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8″ method=”POST”>

<input type=hidden name=”oid” value=”************”>

<input type=hidden name=”retURL” value=”http://”>

<label for=”first_name”>First Name</label><input id=”first_name” maxlength=”40″ name=”first_name” size=”20″ type=”text” /><br>

<label for=”last_name”>Last Name</label><input id=”last_name” maxlength=”80″ name=”last_name” size=”20″ type=”text” /><br>

GCLID:<input id=”12345abcd” maxlength=”255″ name=”12345abcd” size=”20″ type=”hidden” /><br>

</form>

Now my form looks like this:

But if I go back to the code sitting behind it, you can see that my hidden field is still there, waiting to be filled with whatever data I see fit to feed it.

Typically, you should capture more than just the GCLID in Salesforce. We strongly recommend creating hidden fields for the following UTM parameters and capturting that data as well:

utm_source

utm_medium

utm_campaign

utm_content

utm_term

Other platforms will make the handling of a hidden field considerably easier, without needing to directly modify the code on the page.

WordPress Gravity Forms

Gravity Forms is a popular WordPress plugin for submission forms. With this plugin, you do not need to directly edit your website code. To add a hidden field to your Gravity Form:

1. Edit or create a new form
2. Add a hidden field

3. Select your new hidden field and update its name

4. Click to the Advanced tab and check the box to populate this field dynamically

Adding hidden fields to your forms is not particularly difficult, but it can help drive tremendous value. Knowing which leads turn into closed deals is imperative for determining the effectiveness of your marketing efforts.

Looking for additional help on driving closed deals from paid media? Contact our team.