Adding Hidden Fields to HTML Forms

If your forms are just hand-coded HTML (which is common for things like signup forms on SaaS products), you need to add some hidden fields to your forms to get Attributer to work.

In this article, we’ll walk you through the two main steps to get Attributer working and to get the data where you want it to go.

Step 1: Add hidden fields to your forms

The first step is to add a series of hidden fields to your forms, complete with specific value attributes.

The code you need to add is:

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

This will add a series of hidden fields to your forms, with the required variables in the ‘Value’ attribute of the form field.

If needed, you can actually change the ‘value’ ‘name’ or ‘id’ attributes of the HTML form fields. Attributer just needs one of them to be set as above in order to function (technically, we look for the ‘value’ first and then the ‘name’ and then the ‘id’).

So for example, if you need to change the ‘name’ or ‘id’ attributes to match your CRM or other backend tools you could do that, but the variable in the ‘value’ attribute would need to remain the same.

Step 2: Send the data where you need it to go

When you use a form-building tool (like Gravity Forms, Typeform, etc.), this data is automatically captured when the user submits the form, and you can see it in some sort of ‘Submissions’ table in your account.

But when you use custom HTML forms, you also need to code in logic to determine what happens when the user submits the form (like sending the data to your CRM).

It’s quite likely you already have this logic in place (e.g. you already have code in place to send the data to your CRM via an API call). If that’s the case, you simply need to update that logic to send the additional data from these fields into your CRM or other tools.

If you don’t have this logic in place yet, it could be worth considering using form endpoint tools like FormKeep or GetForm. These tools give you a single endpoint you can post the form submission data to, and then provide a UI for viewing submissions and building business logic (like sending a notification email, sending a Slack message, creating a new contact in your CRM, etc). They are a good way for developers to give non-technical people control of what happens to the form submission data.