Skip to content

Help Center

Add Hidden Fields to Jotform

Jotform is a powerful form building tool that you can use on any website.

Attributer does work with Jotform forms but you need to use the ‘Source Code’ embed option rather than the default embed option (which creates an iFrame that Attributer can’t work with because the form isn’t actually on the page).

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 need to embed the form on your website using the ‘Source Code’ option. This is an important step as if you use the default embed option then Attributer won’t be able to see the form on your page (because it loads it in an iFrame which means the form is not actually on your site but is instead on another page that is visible on your site through a window-like ‘frame’)

To embed the form on your website using the Source Code method, simply select it from the list of Embed options.

This will then open a new page in Jotform which gives you a longer bit of code for embedding the form.

Copy this bit of code and paste it on your website wherever you need the form to display.

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.

Can't find the answer you need? Contact us!

Our team are available to answer any questions you have

Support Images