# Formstack Forms UTM Tracking Integration

Set up Formstack Forms with HandL UTM Grabber to capture UTM parameters, GCLID, FBCLID, referrer, and landing page data in hidden fields for attribution.

# Capture UTMs using Formstack forms with HandL UTM Grabber

## UTM attribution overview

This guide explains Capture UTMs using Formstack forms with HandL UTM Grabber. It helps you capture UTM source, medium, campaign, term, content, click IDs, referrer, and landing page data and keep the marketing context needed for accurate reporting across forms, bookings, signups, and sales.

This form only works in HandL UTM Grabber V3

Add the hidden fields as follows. Make sure the hidden field name (either field label or placeholder exactly matches with our naming convention here [Native WP Shortcodes](https://docs.utmgrabber.com/books/102-getting-started-for-handl-utm-grabber-v3/page/native-wp-shortcodes))

[![](https://docs.utmgrabber.com/uploads/images/gallery/2023-01/scaled-1680-/image-1672638185103.png)](https://docs.utmgrabber.com/uploads/images/gallery/2023-01/image-1672638185103.png)

After activating the plugin, insert the following code in your custom javascript file:

```
function FF_OnAfterRender(){
	console.log("Form rendered successfully!"); 
	var vars = ["Lead.UTM_Campaign__c","Lead.UTM_Medium__c","Lead.UTM_Source__c","Lead.UTM_Term__c","Lead.UTM_Content__c","Lead.GCLID__c","Lead.FBclid__c"]
	for (v of vars){
		escape_v = v.replace(/\./g, '\\.')
		jQuery("#"+escape_v).val(Cookies.get(v));
	}
	return true;
}

```

And the fields will be automatically populated after lead is submitted.

[![](https://docs.utmgrabber.com/uploads/images/gallery/2023-01/scaled-1680-/image-1672638247991.png)](https://docs.utmgrabber.com/uploads/images/gallery/2023-01/image-1672638247991.png)

# Capture UTMs using Formstack forms (V4) - Old with HandL UTM Grabber

## UTM attribution overview

This guide explains Capture UTMs using Formstack forms (V4) - Old with HandL UTM Grabber. It helps you capture UTM source, medium, campaign, term, content, click IDs, referrer, and landing page data and keep the marketing context needed for accurate reporting across forms, bookings, signups, and sales.

This form is only compatible with HandL UTM Grabber V3.

Please add the hidden fields as outlined below. Ensure that the hidden field name (either the field label or placeholder) exactly matches our naming convention detailed here: [Native WP Shortcodes](https://docs.utmgrabber.com/books/102-getting-started-for-handl-utm-grabber-v3/page/native-wp-shortcodes).

![Hidden Fields](https://docs.utmgrabber.com/uploads/images/gallery/2023-01/image-1672638185103.png)

As of version 3.0.59, you do not need to perform any additional steps, as Formstack V4 is natively supported.

If you are using HandL UTM Grabber 3.0.58 and below. Then proceed with the following step:

Upon activating the UTM Grabber V3 plugin, insert the following code into your custom JavaScript file:

```javascript
setTimeout(function(){
	handl_utm_all_params.map(function(v){
      var element = document.querySelector('.fsForm [placeholder="'+v+'"]')
      if (element){
        var curVal = Cookies.get(v) ?? "";      
        var event = new Event('input', { bubbles: true })
        var previousValue = element.value

        element.value = curVal
        element._valueTracker.setValue(previousValue)
        element.dispatchEvent(event)
      }
  	})
}, 500)

```

This code will automatically populate the fields after a lead is submitted.

![Populated Fields](https://docs.utmgrabber.com/uploads/images/gallery/2023-01/image-1672638247991.png)

# Capture UTMs using Formstack forms (V4) with HandL UTM Grabber

## UTM attribution overview

This guide explains Capture UTMs using Formstack forms (V4) with HandL UTM Grabber. It helps you capture UTM source, medium, campaign, term, content, click IDs, referrer, and landing page data and keep the marketing context needed for accurate reporting across forms, bookings, signups, and sales.

This form is only compatible with HandL UTM Grabber V3.

Please add the hidden fields as outlined below. Ensure that the hidden field name (either the field label or placeholder) exactly matches our naming convention detailed here: [Native WP Shortcodes](https://docs.utmgrabber.com/books/102-getting-started-for-handl-utm-grabber-v3/page/native-wp-shortcodes).

![Hidden Fields](https://docs.utmgrabber.com/uploads/images/gallery/2023-01/image-1672638185103.png)

Add `Embed Code` in FormStack at the top of your form and include the following script there. Make sure to replace `<FORM ID>` with your own form id

```javascript
<script>
var form = window.fsApi().getForm(<FORM ID>);
form.registerFormEventListener({
    type: 'ready',
    onFormEvent: function (event) {
        if (window.handl_utm_all_params){
        	handl_utm_all_params.map(function(v){
    			var element = document.querySelector('.fsForm [placeholder="'+v+'"]')
    			if (element){
    				var curVal = Cookies.get(v);
    				if (curVal){
						var field_id = element.getAttribute('data-fs-field-id')
						var dest_field = form.getField(field_id);
						dest_field.setValue(curVal);
    				}
    			}	
    		})
        }
    	return Promise.resolve(event);
    }
});
</script>

```

This code will automatically populate the fields after a lead is submitted.

![Populated Fields](https://docs.utmgrabber.com/uploads/images/gallery/2023-01/image-1672638247991.png)