Add hidden fields to Formsite

Attributer is a little bit of code you add to your website. It tracks where your visitors are coming from (I.e. Paid Search, Paid Social, Organic Search, etc) and writes the data into hidden fields you add to your forms. This data is then captured by Formsite 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 Formsite forms. Here’s how to do it:

Step 1: Open the form you want Attributer to work with

In your Formsite account, click ‘Edit’ next to the form you want Attributer to work with.

Step 2: Add a hidden field to the form

To add a ‘Hidden’ field to the form, simply drag and drop the ‘Hidden’ field type from the left-hand menu into your form.

We recommend adding this field below the other fields on your form that you want your visitors to complete.

Step 3: Configure the field

After you’ve dragged and dropped a hidden field into your form, a popup will appear asking for information about this new form field.

To configure the field for Attributer, you’ll need to give the field both a ‘Label’ and a ‘Default Value’

To give the field the correct label, simply type the word ‘Channel’ into the Label field.

To give the field a ‘Default Value’, select the Default Value tab and then add ‘[channel]’ into the default value field (including the square brackets)

Step 4: Repeat steps 2 and 3 to add more hidden fields

You need to add an additional 5 fields to your Formsite form (on top of the one you just added) in order to capture all the data Attributer provides.

So continue to drag and drop more hidden fields into your form and set the Label and Default Values as per below:

Hidden Field #2

• Label = Channel Drilldown 1
• Default Value = [channeldrilldown1]

Hidden Field #3

• Label = Channel Drilldown 2
• Default Value = [channeldrilldown2]

Hidden Field #4

• Label = Channel Drilldown 3
• Default Value = [channeldrilldown3]

Hidden Field #5

• Label = Landing Page
• Default Value = [landingpage]

Hidden Field #6

• Label = Landing Page Group
• Default Value = [landingpagegroup]

Step 5: Complete the form below and copy the code

The next step is to complete the form below and then copy the code it generates for you.

To complete the form, you need to enter the number the field is in your form. So for instance, if the ‘Channel’ field is the 5th field from the top of your form, then you would enter ‘5’ in the form below. Once completed, click the ‘Generate Code’ button and then copy the customised code it generates for you.

Step 6: Paste the code inside your Formsite embed code

The final step is to place this code in a specific spot within the embed code for your Formsite form.

The final embed code, including the new code needed for the form to work with Attributer, should look a bit like this:

<a name="form989201495" id="formAnchor989201495"></a>
<script src="https://fs19.formsite.com/include/form/embedManager.js?989201495"></script>
<script>
const FORMMAP = {
    channel: "5",
    channeldrilldown1: "6",
    channeldrilldown2: "7",
    channeldrilldown3: "8",
    landingpage: "9",
    landingpagegroup: "10",
}

/* DO NOT EDIT BELOW THIS LINE */

const OLDEMBED = EmbedManager;
const formVals = [];
EmbedManager = {embed: (vals) => {
    formVals.push(vals);
    console.log(vals);
}};

function waitForAttrib() {
    if (!document.FlareTrk || !document.FlareTrk.data) {
        return window.requestAnimationFrame(waitForAttrib);
    }
    function getPrepop() {
        const props = {};
        props[FORMMAP.channel] = document.FlareTrk.data.drillData.channel;
        props[FORMMAP.channeldrilldown1] = document.FlareTrk.data.drillData.drillDown1;
        props[FORMMAP.channeldrilldown2] = document.FlareTrk.data.drillData.drillDown2;
        props[FORMMAP.channeldrilldown3] = document.FlareTrk.data.drillData.drillDown3;
        props[FORMMAP.landingpage] = document.FlareTrk.data.landing_url;
        props[FORMMAP.landingpagegroup] = document.FlareTrk.data.landing_page_group;
        return props;
    }

    EmbedManager = OLDEMBED;
    for (let i = 0; i < formVals.length; i++) {
        vals = formVals[i];
        vals.prePopulate = getPrepop();

        EmbedManager.embed(vals);
    }

}
waitForAttrib();
EmbedManager.embed({
	key: "https://fs19.formsite.com/res/showFormEmbed?EParam=B6fiTn-RcO62vT-GlUUd5WrYe2Y6sJfY&989201495",
	width: "100%"
});
</script>

Step 7: Test it works

That’s it! You have now set up Attributer to work with your Formsite form.

The final step is to test it works by completing the form and then seeing if the data comes in on the Results page. It should look something like this:

For more information on how to properly test Attributer is working, see this article.