Gravity Form Tracking

If you want to track your forms and use the Gravity Forms Wordpress plugin, you will need to manually add some javascript to your pages to make this happen.

There are multiple ways to accomplish this goal. Lets show you 2 options.

Submit form data when the Confirmation message loads (recommended)

Simply go to the confirmation settings for your form, switch to 'text' view and append a snippet of javascript like this:

<script type="text/javascript">
  var map = new OTMap();

  var emailTextbox = '{Email:4}'
  var nameTextbox = '{Name:2}'
  var phoneTextbox = ' {Phone:5}'
  var messageTextbox = '{Message:7}'

  map.put("email", emailTextbox);
  map.put("name", nameTextbox);
  map.put("phone", phoneTextbox);
  map.put("message", messageTextbox);

  OTLogService.sendEvent("Contact form submitted", map);
</script>

You will need to 

  • replace the variables like {Email:4} with the form specific values. 
  • Add all the form fields you want to track

You can use the form field dropdown to insert them.

Option 2, Listen on form submit

You will need to go through these 2 steps:

  1. Add a function to execute the tracking code when someone clicks on the submit button and
  2. Grab the values of all your form elements and send them to our endpoint.

Step 1, trigger the tracking code on submit 

First you will need to find the ID of the submit button, eg 'gform_submit_button_1' and use this in a javascript to execute the form tracking function when someone clicks the submit button in your form.

<script type="text/javascript">
jQuery('#gform_submit_button_1').on('click', function(){
	sendTextForm();
	console.log("click");
	});
</script>

Step 2, collect the form data and transfer

in step 1, we are executing a function called 'sendTextForm' once the submit button is clicked. 

In this step we create this function in where we are going to grab the values of the form fields. 

Note:
As you may know, Gravity forms has dynamically generated form ID's so that makes it a little harder to grab the right fields, but by using your browser dev tools/ inspector you should be able to figure this out.

Here is an example of the actual function:

<script type="text/javascript">
function sendTextForm() {
	
	var map = new OTMap();
		
	var emailTextbox = document.getElementById("input_4_3").value;
	var companyTextbox = document.getElementById("input_4_2").value;
	var nameTextbox = document.getElementById("input_4_1").value;
	var titleTextbox = document.getElementById("input_4_4").value;
	var phoneNoTextbox = document.getElementById("input_4_5").value;
	
	// add the form field to the map
	map.put("email", emailTextbox);
	map.put("company", companyTextbox);
	map.put("name", nameTextbox);
	map.put("title", titleTextbox);
	map.put("phoneNumber", phoneNoTextbox);
		
	OTLogService.sendEvent("Contact demo form submitted", map);
	console.log("submit");
}
</script>

Thats it, place both pieces of javascript on your form page (and make sure the tracking pixel is loaded as well) and you should see your form submissions appear in LeadBoxer.

Feel free to contact us if you would like us to help.

Still need help? Contact Us Contact Us