Send form data with UTMs to a webhook (e.g. Zapier)

You can send form data with all the UTMs to a webhook in GTM.

Create a trigger

This is a trigger for your tag. It can be as simple as button click or form submitted.

Create a variables that will capture your form object

Based on the trigger selected, this will change. Basically, you want to capture the form object using gtm.element. If your trigger is a form submit button, then your variable may look like this

Here, we are navigating to the parents until we get the all form objects. The number of parentElement may vary based on your implementation.

//Data Layer Variable Name 
gtm.element.parentElement.parentElement.parentElement.parentElement

Create a tag

Finally create CustomHTML tag to send the collected data to your webhook (e.g. Zapier)

<script>
setTimeout(function(){
		
        var form_obj = jQuery({{formObject}})
        var emailFilled = $('#default_email',form_obj).val() != ''
        
        if (emailFilled){
          var data = handlj.param(HandL.getAll())
          var form_data = form_obj.serialize()
          var xmlHttp = new XMLHttpRequest();
          xmlHttp.open( "GET", 'https://hooks.zapier.com/hooks/catch/1234567/abcdefg/?'+data+"&"+form_data, false ); // false for synchronous request
          xmlHttp.send( null );
          console.log(form_data)
        }else{
         console.log("Not triggered") 
        }
          
}, 100);

</script>