How To Add User Information In Hidden Form Fields Using Cookies

Blake Epstein

Forms are the most widely used method to acquire user information. Most companies use a very vanilla formula consisting of name, email and maybe something a bit more qualifying like company or interest to help create a profile and (hopefully) some sort of marketing segmentation.

The ubiquity of this approach does illustrate how well it works, but many companies fail to leverage the true power of forms to build rich and highly segmentable user profile information.

Richer Data = More Segmentation = Better Campaigns = Higher ROI

The problem with this simplistic approach is that most companies rely only on the "truth" the user provides them (it's very easy to give out a throw-away email or fake name). If your CRM starts to fill with bogus information, that means your campaigns are less effective and your ROI begins to decline substantially.

To remedy this, we need to include information that the user can't alter. Or, even better, include information that the user doesn't even know about. That's where the power of hidden form fields comes in.

A hidden form fields is just that, a field that the user can't see and can't alter its value.

Imagine you're an online retailer and you have a pop-up when a user starts to navigate away from your page.

(Note: This is just for demonstration. I personally wouldn't recommend this many fields for an exit pop)

Say I fill it out:

I've given my name, email and in the dropdown of choices I selected Facebook. I hit submit and this info is now passed into a CRM and/or email client and an abandoned page email trigger fires the 15% coupon to my mailbox.

Sounds like it worked right?

It did work. I converted and now I have 15% off to spend at my leisure.

Everything looks good, but that dropdown isn't exactly accurate. I mean, I think I saw a post or an ad from Facebook, but I don't really know. Well, my inaccuracy is going to cause this retailer's CRM to be inaccurate and now they might attribute the lead and eventual sale to a channel that maybe didn't generate the first touch point (or last touch point). Now their marketing strategist is going to look at which channels are converting the best and recommend more time/budget/effort to a channel that may not actually be delivering the ROI he/she thinks it will.

Here's how to fix that

Instead of relying on the user to provide channel information, we can use an intelligent combination of cookies and hidden fields to get the real truth.

Here's what the new form will look like:

What's happening here?

We now have two new hidden fields that are going to dynamically pull in campaign attributes  like utm_source and utm_campaign to help properly attribute marketing campaign ROI.

Here's how it works

We start with a very simple form. No class styling or anything. We can wrap our hidden fields with an inline style of display none so the user can't see it.

      <form action="/action_page.php">
        First name:<br />
        <input type="text" name="firstname" value="" />
        <br />
        Last name:<br />
        <input type="text" name="lastname" value="" />
        <br />
        Email:<br />
        <input type="email" name="email" value="" />
        <br />
        <div style="display: none;">
        Source:<br />
        <input type="text" name="source" value="" />
        <br />
        Campaign:<br />
        <input type="text" name="campaign" value="" />
      </div>
        <br /><br />
        <input type="submit" value="Submit" />
      </form>

Then we need some javascript to add the magic.

First, we need to be able to set and get a cookie.

 // cookie setting function
        function setCookie(cname, cvalue, exdays) {
          var d = new Date();
          d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
          var expires = "expires=" + d.toUTCString();
          document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
        }
        // cookie getting function
        function getCookie(cname) {
          var name = cname + "=";
          var decodedCookie = decodeURIComponent(document.cookie);
          var ca = decodedCookie.split(";");
          for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == " ") {
              c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
              return c.substring(name.length, c.length);
            }
          }
          return "";
        }

Then we need to grab the user's URL params and look for utm_source and utm_campaign.

// get the url params
        function getParam(querystring) {
          var qstring = window.location.href
            .slice(window.location.href.indexOf("?") + 1)
            .split("&");
          for (var i = 0; i < qstring.length; i++) {
            var urlparam = qstring[i].split("=");
            if (urlparam[0] == querystring) {
              return urlparam[1];
            }
          }
        }
        var source = getParam("utm_source");
        var campaign = getParam("utm_campaign");

We also need to make sure we capturing the referrer incase there are no campaign parameters.

var referrer = function() {
          if (document.referrer === "") {
            return "direct";
          } else if (
            document.referrer.search("https?://(.*)google.([^/?]*)") === 0
          ) {
            return "google";
          } else if (
            document.referrer.search("https?://(.*)bing.([^/?]*)") === 0
          ) {
            return "bing";
          } else if (
            document.referrer.search("https?://(.*)yahoo.([^/?]*)") === 0
          ) {
            return "yahoo";
          } else if (
            document.referrer.search("https?://(.*)facebook.([^/?]*)") === 0
          ) {
            return "facebook";
          } else if (
            document.referrer.search("https?://(.*)twitter.([^/?]*)") === 0
          ) {
            return "twitter";
          } else if (
            document.referrer.search("https?://(.*)pinterest.([^/?]*)") === 0
          ) {
            return "pinterest";
          } else if (
            document.referrer.search("https?://(.*)instagram.([^/?]*)") === 0
          ) {
            return "instagram";
          } else {
            return "other";
          }
        };

After that is the cookie machine. This magic here is that it will set a user cookie of "true" if they've visited the site before. This make sure that the cookies persist across all pages and they won't change if a user came back again from another channel.

function cookieMachine() {
          var user = getCookie("user");
          if (user != "true") {
            setCookie("user", "true", 365);
            if (typeof campaign === "undefined") {
              setCookie("campaign", "organic", 365);
            } else {
              setCookie("campaign", campaign, 365);
            }
            if (typeof source === "undefined") {
              setCookie("source", referrer(), 365);
            } else {
              setCookie("source", source, 365);
            }
          }
        }
        cookieMachine();

Finally, we push the cookies to populate those hidden fields with the user's campaign parameters!

        $("input[name='source']")[0].value = getCookie("source");
        $("input[name='campaign']")[0].value = getCookie("campaign");

And here it is all together:

      $(document).ready(function() {
        // cookie setting function
        function setCookie(cname, cvalue, exdays) {
          var d = new Date();
          d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
          var expires = "expires=" + d.toUTCString();
          document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
        }
        // cookie getting function
        function getCookie(cname) {
          var name = cname + "=";
          var decodedCookie = decodeURIComponent(document.cookie);
          var ca = decodedCookie.split(";");
          for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == " ") {
              c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
              return c.substring(name.length, c.length);
            }
          }
          return "";
        }
        // get the url params
        function getParam(querystring) {
          var qstring = window.location.href
            .slice(window.location.href.indexOf("?") + 1)
            .split("&");
          for (var i = 0; i < qstring.length; i++) {
            var urlparam = qstring[i].split("=");
            if (urlparam[0] == querystring) {
              return urlparam[1];
            }
          }
        }
        var source = getParam("utm_source");
        var campaign = getParam("utm_campaign");
        var referrer = function() {
          if (document.referrer === "") {
            return "direct";
          } else if (
            document.referrer.search("https?://(.*)google.([^/?]*)") === 0
          ) {
            return "google";
          } else if (
            document.referrer.search("https?://(.*)bing.([^/?]*)") === 0
          ) {
            return "bing";
          } else if (
            document.referrer.search("https?://(.*)yahoo.([^/?]*)") === 0
          ) {
            return "yahoo";
          } else if (
            document.referrer.search("https?://(.*)facebook.([^/?]*)") === 0
          ) {
            return "facebook";
          } else if (
            document.referrer.search("https?://(.*)twitter.([^/?]*)") === 0
          ) {
            return "twitter";
          } else if (
            document.referrer.search("https?://(.*)pinterest.([^/?]*)") === 0
          ) {
            return "pinterest";
          } else if (
            document.referrer.search("https?://(.*)instagram.([^/?]*)") === 0
          ) {
            return "instagram";
          } else {
            return "other";
          }
        };

        function cookieMachine() {
          var user = getCookie("user");
          if (user != "true") {
            setCookie("user", "true", 365);
            if (typeof campaign === "undefined") {
              setCookie("campaign", "organic", 365);
            } else {
              setCookie("campaign", campaign, 365);
            }
            if (typeof source === "undefined") {
              setCookie("source", referrer(), 365);
            } else {
              setCookie("source", source, 365);
            }
          }
        }
        cookieMachine();
        $("input[name='source']")[0].value = getCookie("source");
        $("input[name='campaign']")[0].value = getCookie("campaign");
      });

SHARE

Other Posts