How to Add Hidden Fields to Wufoo Forms

Attributer is a lightweight piece of code that you integrate into your website to track where your visitors originate from—whether it’s Paid Search, Paid Social, Organic Search, or another channel. This data is automatically populated into hidden fields within your forms, which Wufoo then captures and sends to your CRM or other marketing tools.

To get started, you’ll need to add several hidden fields to your Wufoo form. Follow the steps below to set it up:

Step 1: Open the Target Form in Wufoo

Log in to your Wufoo account and navigate to the form you want to integrate with Attributer. Click to open the form editor.

Step 2: Insert Six Single-Line Text Fields

Drag and drop six ‘Single Line Text’ fields from the left-hand menu into your form. You’ll configure these fields in the next step.

For best results, position these fields below the visible fields where users will input their details.

Step 3: Configure the Hidden Fields

To set up a field, just click on the desired field within your form, and the options panel will open on the left side. You’ll need to adjust three key settings for each field: the Field Label, the Predefined Value, and the CSS Keywords:

Configure each of the six hidden fields as shown below:

• Field #1
  • Field Label = Channel
  • Predefined Value = [channel]
  • CSS Layout Keyword: hide
• Field #2
  • Field Label = Channel Drilldown 1
  • Predefined Value = [channeldrilldown1]
  • CSS Layout Keyword: hide
• Field #3
  • Field Label = Channel Drilldown 2
  • Predefined Value = [channeldrilldown2]
  • CSS Layout Keyword: hide
• Field #4
  • Field Label = Channel Drilldown 3
  • Predefined Value = [channeldrilldown3]
  • CSS Layout Keyword: hide
• Field #5
  • Field Label = Landing Page
  • Predefined Value = [landingpage]
  • CSS Layout Keyword: hide
• Field #6
  • Field Label = Landing Page Group
  • Predefined Value = [landingpagegroup]
  • CSS Layout Keyword: hide

After making these changes, your form should resemble the following:

Step 4: Get the Form Embed Code

Once your form is set up, click the ‘Share Form’ button at the bottom of the page.

This will take you to a screen displaying different embedding options. Attributer works with both JavaScript and iFrame embed methods.

Step 5: Modify the Embed Code

Before embedding the form on your website, you need to modify the code to ensure Attributer can populate the hidden fields correctly.

1. Copy your chosen JavaScript or iFrame embed code from the box and paste it into a text editor (e.g., Google Docs, Notepad, etc).

2. Go to your Wufoo homepage, click the three-dot menu next to your form, and select ‘API Information’.

3. This page displays a table with the API IDs for all fields in your form. Note the IDs for the six hidden fields and the Hash ID at the bottom.

4. With that in place, navigate back to the section where you previously pasted the JavaScript embed code. Then, add the following snippet immediately below it:

<script>
const FORMMAP = {
    hash: "ENTER_FORM_HASH_HERE",
    channel: "ENTER_FIELD_ID_HERE",
    channeldrilldown1: "ENTER_FIELD_ID_HERE",
    channeldrilldown2: "ENTER_FIELD_ID_HERE",
    channeldrilldown3: "ENTER_FIELD_ID_HERE",
    landingpage: "ENTER_FIELD_ID_HERE",
    landingpagegroup: "ENTER_FIELD_ID_HERE",
}

/* DO NOT EDIT BELOW THIS LINE */
function fillForm() {
    const qs = document.querySelector(`iframe[src*=${FORMMAP.hash}]`);
    if (!qs || !document.FlareTrk || !document.FlareTrk.data) {
        return window.requestAnimationFrame(fillForm);
    }
    function getAttribParams() {
        return `field${FORMMAP.channel}=${document.FlareTrk.data.drillData.channel}&` +
            `field${FORMMAP.channeldrilldown1}=${document.FlareTrk.data.drillData.drillDown1}&` +
            `field${FORMMAP.channeldrilldown2}=${document.FlareTrk.data.drillData.drillDown2}&` +
            `field${FORMMAP.channeldrilldown3}=${document.FlareTrk.data.drillData.drillDown3}&` +
            `field${FORMMAP.landingpage}=${document.FlareTrk.data.landing_url}&` +
            `field${FORMMAP.landingpagegroup}=${document.FlareTrk.data.landing_page_group}`;
    }


    const src = qs.src;
    const parts = src.split("/def/");
    if (parts.length == 1) {
        qs.src = src + "/def/" + getAttribParams();
    } else {
        parts[parts.length - 1] = getAttribParams() + "&" + parts[parts.length - 1]
        qs.src = parts.join('/def/')
    }
}
fillForm();
</script>

5. Lastly, replace the placeholder values (like ENTER_FIELD_ID_HERE) at the beginning of the code snippet with the actual Field IDs and form Hash from your Wufoo form. Your completed script might look like this:

Once done, copy the entire code snippet—including the original Wufoo embed code and the additional Attributer script—and paste it into your website where you want the form to appear.