Add hidden fields to Tally Forms

Tally Forms is one of the newer form-building tools on the market. They take a different approach to building a form that focuses on typing shortcodes to add form fields as opposed to the standard drag-and-drop type interface other form builders use.

Attributer can work with Tally Forms if you follow the instructions below:

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

From your Tally Forms Dashboard, click the form you want Attributer to work with.

Step 2: Add the first hidden fields to the form

To add the first hidden field to the form, click where in the form you want to add it (we recommend adding it underneath the last visible form field) and type ‘/hidden’. Then select ‘Hidden field’ from the dropdown that appears.

This will add a new hidden field to the bottom of your form.

You then need to give it a specific name. To do that, simply type ‘channel’ into the box that appears.

That’s it! You have now successfully added the first hidden field.

Step 3: Add the rest of the fields

Now you need to repeat the above process to add an additional 5 fields to your form. The configuration for each of these additional fields is as follows:

Hidden Field #2

• Name = channeldrilldown1

Hidden Field #3

• Name = channeldrilldown2

Hidden Field #4

• Name = channeldrilldown3

Hidden Field #5

• Name = landingpage

Hidden Field #6

• Name = landingpagegroup

You ultimately want your form to look a bit like this:

Finally, click the ‘Publish’ button at the top of the page to save the changes to your form.

Step 4: Copy the embed code

Now that you have added the hidden fields, it’s time to embed the form on your website.

Navigate back to the overview page for your form and click the ‘Share’ tab before selecting the ‘Standard’ embed option.

When the Embed page loads, click the ‘Get the Code’ button to access the embed code for your form.

Finally, copy the code that appears in the top right corner.

Step 5: Edit the embed code

Now you just need to make a tiny tweak to the code. The best way to do this is to pase the cod einto some sort of text editor (like a Google Doc, Microsoft Word Doc, or the Notes app on your computer).

You first want to remove the words ‘data-tally-‘ from the opening line and replace it with the words ‘data-attributer-iframe’

So if your code previously looked like this:

<iframe data-tally-src="https://tally.so/embed/3lB5BX?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1" loading="lazy" width="100%" height="200" frameborder="0" marginheight="0" marginwidth="0" title="Contact Form"></iframe><script>var d=document,w="https://tally.so/widgets/embed.js",v=function(){"undefined"!=typeof Tally?Tally.loadEmbeds():d.querySelectorAll("iframe[data-tally-src]:not([src])").forEach((function(e){e.src=e.dataset.tallySrc}))};if("undefined"!=typeof Tally)v();else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w,s.onload=v,s.onerror=v,d.body.appendChild(s);}</script>

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

<iframe data-attributer-iframe src="https://tally.so/embed/3lB5BX?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1" loading="lazy" width="100%" height="200" frameborder="0" marginheight="0" marginwidth="0" title="Contact Form"></iframe><script>var d=document,w="https://tally.so/widgets/embed.js",v=function(){"undefined"!=typeof Tally?Tally.loadEmbeds():d.querySelectorAll("iframe[data-tally-src]:not([src])").forEach((function(e){e.src=e.dataset.tallySrc}))};if("undefined"!=typeof Tally)v();else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w,s.onload=v,s.onerror=v,d.body.appendChild(s);}</script>

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 how to write the data to the form inside it.

Step 6: Add the modified embed code to your website

Now that you have modified the embed code and given the iFrame a name, you can paste it onto your website where you want your form to be.

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 or book a time to jump on a call here.