Adding Hidden Fields to Webflow

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 which is then captured in Webflow 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 Webflow forms. Here’s how to do it:

Step 1: Add an Embed element to your form

The first step is to add an Embed element to your form. The best place to do this is just above the Submit button and below the last input field in your form that your visitors will actually complete.

Step 2: Add code to your Embed element

The next step is to add hidden fields by entering the raw HTML code. This is essentially what Webflow’s form builder adds to your page anyway, it’s just you are adding it by writing out raw HTML as opposed to using Webflow drag and drop builder.

The code you need to add to your form element is:

<input type="hidden" class="form-item field hidden" id="attributer-channel" name="attributer-channel" value="[channel]">
<input type="hidden" class="form-item field hidden" id="attributer-channeldrilldown1" name="attributer-channeldrilldown1" value="[channeldrilldown1]">
<input type="hidden" class="form-item field hidden" id="attributer-channeldrilldown2" name="attributer-channeldrilldown2" value="[channeldrilldown2]">
<input type="hidden" class="form-item field hidden" id="attributer-channeldrilldown3" name="attributer-channeldrilldown3" value="[channeldrilldown3]">
<input type="hidden" class="form-item field hidden" id="attributer-landingpage" name="attributer-landingpage" value="[landingpage]">
<input type="hidden" class="form-item field hidden" id="attributer-landingpagegroup" name="attributer-landingpagegroup" value="[landingpagegroup]">

Simply copy and paste the code from above and enter it into the Embed block

Step 3: Publish your site and test

Finally, publish your site and then navigate to the page your form is on. Complete the form and submit it.

If it’s working correctly, you should see a form submission in Project Settings > Forms that looks something like this:

As you can see, the Channel & Landing Page data captured by Attributer is contained in the ‘attributer-channel’ and ‘attributer-landingpage’ fields.

You can now send that data over to your CRM however you normally would (I.e. via Zapier, CSV downloads, etc).

The Attributer information will also be sent with the standard ‘New form submission’ emails that Webflow sends.