Add hidden fields to GoHighLevel forms

GoHighLevel is an all-in-one CRM and marketing automation platform that includes a form builder.

Attributer can pass through marketing attribution information with each submission of your GoHighLevel forms. Simply follow the steps below to set it up.

1. Add 6x custom fields to your contact records

Before you can add hidden fields to your forms, you first need to add them to the contact record. This then allows you to add the fields to your forms (and gives GoHighLevel a spot to store the data that Attributer passes in).

To do that, navigate to the Contacts section of GoHighLevel and select the ‘Custom Fields’ tab at the top of the page.

On the Custom fields page, click the ‘Create field’ button.

A panel will appear on the right where you can set up the new field.

Enter the following details into the panel, then click the ‘Create custom field’ button in the bottom right corner:

• Field type = Single line
• Add to object = Contact
• Field name = Channel
• Folder name = Select which folder you want this field to sit in on the Contact record. If you don’t know what this is, just select ‘General Info’

Congratulations! You’ve now added the first field. You then need to repeat this process 5 more times to add the rest of the fields that Attributer requires. The information you’ll need to enter is as follows:

Field 2

• Field type = Single line
• Add to object = Contact
• Field name = Channel Drilldown 1
• Folder name = General Info (or wherever you chose to put the first field)

Field 3

• Field type = Single line
• Add to object = Contact
• Field name = Channel Drilldown 2
• Folder name = General Info (or wherever you chose to put the first field)

Field 4

• Field type = Single line
• Add to object = Contact
• Field name = Channel Drilldown 3
• Folder name = General Info (or wherever you chose to put the first field)

Field 5

• Field type = Single line
• Add to object = Contact
• Field name = Landing Page
• Folder name = General Info (or wherever you chose to put the first field)

Field 6

• Field type = Single line
• Add to object = Contact
• Field name = Landing Page Group
• Folder name = General Info (or wherever you chose to put the first field)

Once you’re done, you should see all six fields in your list of custom fields.

2. Add the new fields to your form

Now that you’ve created these new fields in GoHighLevel, it’s time to add them to your form.

To do that, navigate to the Forms section of GoHighLevel by selecting the ‘Sites’ option from the left sidebar and then the ‘Forms’ option from the top menu. Then select the form you want Attributer to work with to open it in the form builder.

Once the form is open in the builder, click the ‘+’ button in the top left corner to open the Form Element panel, then select the ‘Add Object Fields’ tab.

Make sure ‘Contact’ is selected in the dropdown at the top of the panel, then scroll down until you find the six fields you created in Step 1. Tick the checkbox next to each of them and click the ‘Add 6 fields’ button at the bottom of the panel.

3. Configure the fields

Now that you’ve added the fields to your form, it’s time to configure them.

To do that, click the ‘Channel’ field in your form and a sidebar will appear on the right that allows you to edit the field’s properties. Make sure the ‘Query Key’ field is set to ‘channel’ and the ‘Hidden’ tickbox is ticked. It should look a bit like this.

Congratulations! You’ve now configured the first field!

You then need to repeat this process for the other 5x fields on the form, using the following information:

Channel Drilldown 1 Field

• Query Key = channeldrilldown1
• Hidden tickbox = Ticked

Channel Drilldown 2 Field

• Query Key = channeldrilldown2
• Hidden tickbox = Ticked

Channel Drilldown 3 Field

• Query Key = channeldrilldown3
• Hidden tickbox = Ticked

Landing Page Field

• Query Key = landingpage
• Hidden tickbox = Ticked

Landing Page Group Field

• Query Key = landingpagegroup
• Hidden tickbox = Ticked

Once you’re done, click the ‘Save’ button in the top right corner. Your form should look a bit like this, with all six fields marked as hidden.

4. Add the embed code

The next thing you need to do is add the form’s embed code on your website (assuming you don’t have it on your site already).

To get the embed code, click the ‘Integrate’ button in the top right corner of the form builder. In the popup that appears, select ‘Embed Code’ on the left, choose the layout you want (such as ‘Inline’) and click the ‘Copy embed code’ button.

You then need to go to wherever you want the form to appear on your site and paste the copied embed code in.

5. Tell Attributer where the form is

The final thing you need to do is make one small change to the GoHighLevel embed code you pasted in Step 4.

Find <iframe at the very top of the code and add data-attributer-iframe on the line straight after it, so the top of the code looks like this:

<iframe
    data-attributer-iframe
    src="https://api.leadconnectorhq.com/widget/form/..."

That’s it. When a visitor lands on your page, Attributer passes its data straight into the GoHighLevel form, and GoHighLevel drops it into the hidden fields you set up in Step 3.

If your site uses a lazy loading plugin (such as WP Rocket or Smush), exclude this form from lazy loading. Otherwise the plugin can reload the form without Attributer’s data.

If you added the extra code from an older version of this article, you can remove it.

6. Test it all works correctly

Now that you have completed all the setup steps, it’s time to make sure it’s all working correctly.

Learn how to properly test Attributer is working here.