Using Form Capture with Gravity Forms

NOTE: This article discusses the use case of utilizing ClickDimensions Form Captures with Gravity Forms (plugin for WordPress) and assumes you are already familiar with the functionality of both Form Captures and Gravity Forms. To learn how to set up a Form Capture normally, check out this article.

The process for setting up a Form Capture to use with an existing Gravity Form is mostly the same as setting up a Form Capture for any other third party form: a Form Capture needs to be created in CRM, Form Fields have to be associated with it, and your ClickDimensions tracking script needs to be added to the page hosting the form. The problem lies in the fact that a Gravity Form will not allow users to modify certain aspects of the HTML that are necessary for the Form Capture to work properly, such as the form action and field IDs, without a webhook add-on. 

This issue can be circumvented by adding a few extra JavaScript functions along with the ClickDimensions tracking script.

Goals

• Learn how to use a Form Capture with Gravity Forms to track submissions in CRM

Gravity Forms Script

Begin by opening your Form Capture record and clicking the Gravity Forms button in the toolbar.

This will display a pop-up containing the script that should be added to the page hosting the Gravity Form alongside the tracking script. The script will automatically be modified to account for any Form Capture Fields associated with the Form Capture. The script will look like this by default:

and will look something like this as Form Capture Fields are added:

Update the Script to Match the Gravity Form

Once the script has been added to your page, manually remove the bold Form ID and Input ID placeholder text and surrounding brackets from the script and replace it with the corresponding values from the Gravity Form.

Where Can I Find the Gravity Form and Form Field IDs?

Open The Gravity Form you are working with in WordPress and click the Preview button.

While viewing the form preview, right click and choose Inspect Element. This will allow you to see the HTML for the Gravity Form.

Above the HTML panel, click the icon that looks like a mouse pointer over a square. This will allow you to mouse over elements of the Gravity Form and automatically highlight the relevant HTML. Use this method to highlight the whole form to find the Form ID, then highlight each individual field to find the Field IDs.

You are looking for the attributes labelled id. This is where you will see the Form ID:

and This is where you will see the Field IDs:

In this example, our script would look like this once we have filled in the Form ID and Field IDs:

Once you have saved the changes to your page, you should be able to submit the Gravity Form and have it create Posted Forms and Posted Fields within CRM to track the submissions.