Using Form Capture with Gravity Forms

This article discusses additional steps required to use 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.

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.

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:

NOTE: the URL analytics.clickdimensions.com in the Gravity Forms Integration script varies based on your Data Center. Be sure check the script in your own environment when setting up your Form Capture.

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

Update the Script to Match Your Website

For the Gravity Forms integration script to function properly after being added to your site, the value in the parentheses of the line:

cdAnalytics.setDomain('clickdimensions.com'); 

needs to be manually replaced with the domain of the website on which the script is being used and a corresponding Domain record must exist within your CRM environment.

For example, if the script is being placed on your website, mycompany.com, make sure you have a mycompany.com Domain record in CRM and update that line of the script to:

 cdAnalytics.setDomain('mycompany.com'); 

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:

NOTE: Not all fields in Gravity Forms use the field ID format 'input_x_y'; be sure to confirm the correct values in your form code before placing the field ID values into the Gravity Form integration script.

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.