# 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. 
[![](https://docs.utmsimple.com/uploads/images/gallery/2022-03/scaled-1680-/image-1646265515745.png)](https://docs.utmsimple.com/uploads/images/gallery/2022-03/image-1646265515745.png)

#### 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

[![](https://docs.utmsimple.com/uploads/images/gallery/2022-03/scaled-1680-/image-1646265620245.png)](https://docs.utmsimple.com/uploads/images/gallery/2022-03/image-1646265620245.png)

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>
```