Typeform

Typeform is a popular form builder known for its conversational, one-question-at-a-time design that creates engaging, interactive forms. AttributionHub supports three integration methods for Typeform:

1. Embedded Typeforms (data-tf-hidden) — The primary method. AttributionHub sets the data-tf-hidden attribute on the Typeform container, passing attribution values as hidden fields. If the embed uses an iframe, values are also added as hash parameters on the iframe URL.
2. Native form elements — Typeform elements rendered as standard HTML forms are populated directly via the standard forms handler.
3. Widget reload — If the Typeform SDK (window.tf) is present, AttributionHub triggers a widget reload after population so the hidden field values are applied immediately.

Prerequisites

Before you begin, make sure:

• The AttributionHub tracking script is installed on your site (see Installation)
• You have a Typeform account with access to create or edit forms
• You know which embed method you are using (standard embed, popup, slider, etc.)

Step 1: Add Hidden Fields in Typeform

Hidden fields in Typeform allow you to pass data into a form without showing it to the respondent. You will create hidden fields for each attribution value you want to capture.

1. Open your Typeform in the editor
2. Click on Logic in the left sidebar
3. Click Hidden Fields
4. Click Add hidden field
5. For each attribution field, enter the field name exactly as used in your AttributionHub field mapping. For example:
   • ah_lt_channel
   • ah_lt_source
   • ah_lt_medium
   • ah_lt_campaign
   • ah_lt_landing_url
   • ah_ft_channel
   • ah_ft_source
   • ah_visitor_id
6. Click Save after adding all hidden fields

The hidden field names in Typeform must exactly match the field names in your AttributionHub field mapping (by default, names like ah_lt_channel, etc.).

Step 2: Add the data-attrhub-tf Attribute to Your Embed

To tell AttributionHub where your Typeform is embedded, add the data-attrhub-tf attribute to the Typeform container element.

Standard embed:

<div
  data-tf-widget="YOUR_FORM_ID"
  data-tf-medium="snippet"
  data-attrhub-tf
  style="width:100%;height:500px;"
></div>
<script src="//embed.typeform.com/next/embed.js"></script>

Popup embed:

<button data-tf-popup="YOUR_FORM_ID" data-tf-size="70" data-attrhub-tf>
  Open Form
</button>
<script src="//embed.typeform.com/next/embed.js"></script>

Slider embed:

<button data-tf-slider="YOUR_FORM_ID" data-attrhub-tf>Open Form</button>
<script src="//embed.typeform.com/next/embed.js"></script>

The key addition is data-attrhub-tf on the element. This attribute tells AttributionHub to treat it as a Typeform embed and populate its hidden fields.

Step 3: Test the Integration

1. Visit a page on your site that contains the Typeform embed
2. Open your browser’s DevTools (F12)
3. In the Elements panel, find the element with data-attrhub-tf and check that it now has a data-tf-hidden attribute with attribution values like:

   data-tf-hidden="ah_lt_channel=Organic%20Search,ah_lt_source=Google,ah_lt_medium=organic,..."

4. If the embed uses an iframe, check that the iframe src includes attribution values in the URL hash fragment (after #)
5. Submit a test response through the Typeform
6. In Typeform, go to Results > Responses and check that the hidden fields contain attribution values

For a full testing walkthrough, see Verify It Works.

How It Works

data-tf-hidden Attribute

The Typeform embed SDK reads the data-tf-hidden attribute to populate hidden fields. AttributionHub builds a comma-separated list of fieldName=value pairs from your field mapping and sets this attribute on the Typeform container:

data-tf-hidden="ah_lt_channel=Paid%20Search,ah_lt_source=Google,ah_lt_medium=paid"

When the Typeform loads, it reads this attribute and passes the values as hidden field answers.

Iframe Hash Parameters

If the Typeform embed uses an iframe internally, AttributionHub also adds attribution values to the iframe URL’s hash fragment (#). This is a secondary population method that ensures values are passed even if the SDK does not read data-tf-hidden in time:

https://form.typeform.com/to/FORM_ID#ah_lt_channel=Paid%20Search&ah_lt_source=Google

Widget Reload

If the Typeform JavaScript SDK (window.tf) is available and has a reload() method, AttributionHub calls it after populating the hidden fields. This forces the Typeform widget to re-read the data-tf-hidden attribute and apply the updated values.

Recommended Hidden Fields

The table below lists the most commonly used fields. For the complete field catalog, see Field Reference.

Core Attribution Fields (Latest Touch)

Core Attribution Fields (First Touch)

Global Fields

For additional fields including latest-non-direct touch (ah_lnd_*), drill-down fields, raw UTM parameters, and ad click IDs, see the full Field Reference.

Custom Field Mapping

If your Typeform hidden fields use different names, override the defaults:

<script>
  window.attrhub = {
    settings: {
      fieldMapping: {
        "latest.attribution.channelGroup": "marketing_channel",
        "latest.attribution.source": "traffic_source",
        "latest.attribution.campaign": "campaign_name",
      },
    },
  };
</script>

Make sure the names in fieldMapping match the hidden field names you created in Typeform. See Configuration for the full mapping reference.

Tips

• Typeform results export — When you export responses from Typeform (CSV or Google Sheets integration), hidden field values are included as columns. This makes it easy to analyze which marketing channels drive the most form responses.
• Typeform webhooks — If you use Typeform’s webhook feature to send responses to a CRM or other tool, hidden field values are included in the webhook payload automatically.
• Zapier / Make integrations — When connecting Typeform to other tools via Zapier or Make, map the hidden fields to the appropriate destination fields in your CRM, spreadsheet, or database.
• Multiple Typeforms on one page — Add data-attrhub-tf to each Typeform container. AttributionHub populates all of them independently.
• Typeform analytics — Combine Typeform’s built-in analytics with attribution data to understand not just completion rates, but which traffic sources produce the most engaged respondents.

Troubleshooting

Hidden fields are empty in Typeform responses

1. Verify that the Typeform container has the data-attrhub-tf attribute.
2. Check the data-tf-hidden attribute on the container in DevTools — it should contain your field names and values.
3. Make sure the hidden field names in Typeform exactly match the field names used in data-tf-hidden (names are case-sensitive).
4. Enable logging (enableLogging: true in settings) and check the browser Console.

data-tf-hidden is set but values are not appearing in responses

This can happen if the Typeform embed loads and initializes before AttributionHub sets the data-tf-hidden attribute. The widget reload (window.tf.reload()) should handle this, but if the Typeform SDK version does not support reload, you may need to ensure the AttributionHub script loads before the Typeform embed script.

Popup or slider form not detected

Make sure the data-attrhub-tf attribute is on the trigger element (the button or link), not on a parent container. AttributionHub looks for [data-attrhub-tf] elements specifically.