By adding special hidden fields, Attributer can automatically attach important details like UTM parameters from form submissions. Follow these simple steps:
Step 1: Find Your Form
Log into Typeform and open the form you want to beconnected to Attributer.
Step 2: Add Hidden Fields
In the form editor:
(1) Click the Logic tab and Select Pull data in
(2) Create these 6 special fields exactly as named:
- channel
- channeldrilldown1
- channeldrilldown2
- channeldrilldown3
- landingpage
- landingpagegroup
Don’t forget to click Save!
Step 3: Update Your Website Code
Step 3.1: Add Default Values
- In your Typeform form builder, go to Share > Embed in a web page > Advanced. Enable Set custom values in the right-hand panel.
- For each hidden field, input these default values:
| Hidden Field Name | Default Value |
| channel | [channel] |
| channeldrilldown1 | [channeldrilldown1] |
| channeldrilldown2 | [channeldrilldown3] |
| channeldrilldown3 | [channeldrilldown3] |
| landingpage | [landingpage] |
| landingpagegroup | [landingpagegroup] |
Step 3.2: Generate Your Embed Code
- Click the View code button at the top of the editor.
- Click the Copy button to copy the embed code.
Step 3.3: Edit the embed code
Paste the code into a text editor to make a critical adjustment:
- Insert
data-attributer-tf="true"between “data-tf-live” and “div” , like this:
Step 3.4: Add the modified embed code to your website
Add the modified code to your website. Even if the form was previously embedded, you need replace the old code with this updated version. The data-attributer-tf="true" tag is essential for Attributer to pass data—retaining the old code will break this functionality.
