Add Hidden Fields to Jotform

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 Jotform 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 Jotform forms. Here’s how to do it:

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

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

Step 2: Add 6x ‘Short Text’ fields to the form

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

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

To collect all the information that Attributer provides, you will need to drag and drop 6x hidden fields into your form.

Step 3: Configure the fields

Next, you need to configure each of the 6 fields you just added to your form to ensure that (a) they are not visible to users when they complete the form and (b) that Attributer knows which form fields to write the attribution data to.

To configure a field, simply click on the ‘Properties’ icon next to a field and the Properties panel will appear on the right hand side..

For each of the 6x hidden fields, add the following information:

Hidden Field #1

Question Text = Channel
Default Value = [channel]
Hide Field = On

Hidden Field #2

Question Text = Channel Drilldown 1
Default Value = [channeldrilldown1]
Hide Field = On

Hidden Field #3

Question Text = Channel Drilldown 2
Default Value = [channeldrilldown2]
Hide Field = On

Hidden Field #4

Question Text = Channel Drilldown 3
Default Value = [channeldrilldown3]
Hide Field = On

Hidden Field #5

Question Text = Landing Page
Default Value = [landingpage]
Hide Field = On

Hidden Field #6

Question Text = Landing Page Group
Default Value = [landingpagegroup]
Hide Field = On

Step 4: Embed the form on your website

Jotform has two different types of forms, Classic Forms and Card Forms. The method for embedding the form on your website so that it works with Attributer is different depending on which one you are using so make sure to follow the correct instructions below.

If you’re using a ‘Classic Form’

If the form you created is a ‘Classic Form’ then you have two different options for embedding the form on your website:

Standard embed method – The standard embed method is a bit more difficult to implement initially, but if you update your form you don’t need to update the embed code for the changes to display.
Source code embed method – The Source Code embed method is easier to implement initially, but each time you change your form you will need to re-embed the form on your site in order for the changes to be shown on your website.

Click one of the links above for further instructions for setting up Attributer depending on which embed method you wish to use (or which one you already use).

If you’re using a ‘Card Form’

If you’re using a card form, then you need to embed the form on your page using the ‘iFrame’ embed option.

The first step is to select the iFrame embed option within the Publish section of Jotform as seen below:

Then once on the iFrame page, copy the code given to you by selecting the ‘Copy Code’ button:

Next, paste the code into any sort of word editing tool (I.e. Microsoft Word, Google Docs, the Notes app on your computer, etc). Anywhere where you can edit the text of the code.

You now need to make a tiny tweak to the code. In between the words ‘iframe’ and ‘id’ you want to add the text ‘data-attributer-iframe’

So if the beginning of your code previously looked like this:

 <iframe
      id="JotFormIFrame-220581748155863"
      title="Card Based Form"

You would want to change it so that it looked like this:

 <iframe data-attributer-iframe
      id="JotFormIFrame-220581748155863"
      title="Card Based Form"

What you are essentially doing here is giving the iFrame a name (you are naming it ‘data-attributer-iframe’) which Attributer can then look for and write the data into.

The reason you need to do this is that an iFrame is essentially a window that shows another page on your website. So when you insert the form via an iFrame you are not actually adding the form to your website, but instead you are adding a window to your website and the form displays inside it.

So you need to give this iFrame a specific name so that Attributer can look for it and know to write the data to the form inside it.

Finally, once you have modified the embed code, you can now place it on your website wherever you need the form to display.

A final note

We understand editing code can be a bit scary, so if you need help then we are happy to jump on a video call with you and walk you through it. Feel free to contact us here.

Help Center