Add Hidden Fields to Feathery

Attributer is a little bit of code you add to your website. It tracks where your visitors are coming from (Paid Search, Paid Social, Organic Search, etc) and writes the data into hidden fields you add to your forms which is then captured by Feathery and can be sent to your CRM and other tools.

In order for it to work, you need to add a series of hidden fields to your Feathery forms. Here’s how to do it:

Step 1: Add hidden fields to your Feathery forms

The first thing you need to do is add a series of hidden fields to your Feathery forms. This video shows you how:

The hidden fields you need to add are:

• channel
• channeldrilldown1
• channeldrilldown2
• channeldrilldown3
• channeldrilldown4
• landingpage
• landingpagegroup

Step 2: Get the embed code and note the ID’s

The next step is to get the embed code of your form and note the IDs. This video shows you how:

Step 3: Modify the embed code on your website

The final thing you need to do is modify the embed code you have on your website (the one that causes your Feathery form to show). This video explains how:

The code you need to embed is as follows:

<script>
(function () {

  // ---------------------------------------------------------
  // 1. Get Attributer data (document.FlareTrk.data)
  // ---------------------------------------------------------
  function getAttributerData() {
    if (window.document.FlareTrk && window.document.FlareTrk.data) {
      return window.document.FlareTrk.data;
    }
    return null;
  }

  // ---------------------------------------------------------
  // 2. Convert Attributer data into Feathery hidden fields
  // ---------------------------------------------------------
  function buildFeatheryFieldValues(data) {
    if (!data) return null;
    var fields = {};

    // Channel + drilldowns
    if (data.drillData) {
      fields.channel           = data.drillData.channel;
      fields.channeldrilldown1 = data.drillData.drillDown1;
      fields.channeldrilldown2 = data.drillData.drillDown2;
      fields.channeldrilldown3 = data.drillData.drillDown3;
      fields.channeldrilldown4 = data.drillData.drillDown4;
    }

    // ⭐ Correct landing page field (cleaned)
    if (data.landing_url)         fields.landingpage      = data.landing_url;
    if (data.landing_page_group)  fields.landingpagegroup = data.landing_page_group;

    // Click IDs
    if (data.gclid)   fields.gclid   = data.gclid;
    if (data.msclkid) fields.msclkid = data.msclkid;
    if (data.fbclid)  fields.fbclid  = data.fbclid;
    if (data.gbraid)  fields.gbraid  = data.gbraid;
    if (data.wbraid)  fields.wbraid  = data.wbraid;

    // Visits + device
    if (data.conversiondays) fields.conversiondays = data.conversiondays;
    if (data.visits)         fields.visits         = data.visits;
    if (data.device)         fields.device         = data.device;

    // Remove undefined/null values
    var cleaned = {};
    Object.keys(fields).forEach(function (k) {
      if (fields[k]) cleaned[k] = fields[k];
    });

    return Object.keys(cleaned).length ? cleaned : null;
  }

  // ---------------------------------------------------------
  // 3. Wait for Feathery fields to initialise, then set values
  // ---------------------------------------------------------
  function applyAttributerToFeathery(context) {
    var attempts = 0;
    var maxAttempts = 10;

    function tryOnce() {
      var data = getAttributerData();
      var values = buildFeatheryFieldValues(data);

      if (values && context.fields) {
        Object.keys(values).forEach(function (fieldId) {
          var fieldObj = context.fields[fieldId];
          if (fieldObj && "value" in fieldObj) {
            fieldObj.value = values[fieldId];
          }
        });
        return; // success
      }

      attempts++;
      if (attempts < maxAttempts) {
        setTimeout(tryOnce, 200);
      }
    }

    tryOnce();
  }

  // ---------------------------------------------------------
  // 4. Initialise Feathery and render form with onLoad hook
  // ---------------------------------------------------------

  // 👉 Replace this with your Feathery SDK key
  Feathery.init('YOUR_FEATHERY_SDK_KEY');

  const loginEnabled = false;

  Feathery.renderAt('container', {
    // 👉 Replace this with your Feathery form ID
    formId: 'YOUR_FORM_ID',

    onLoad: function (context) {
      applyAttributerToFeathery(context);
    }

  }, loginEnabled);

})();
</script>

Step 4: Test it’s working

Now that you have set everything up, the final step is to test it is working.

The best way to do that is to open a new incognito window, navigate to your form, and fill it out. You can do then confirm the data is being captured by navigating to the Results tab, selecting your form submission, and then seeing what data was captured in the Hidden Fields tab.

To learn more about properly testing Attributer is working, see this article.

---

We understand modifying code can be a bit tricky, so if you need help, please get in touch with our support team and they can walk you through it.