Add event listener to trigger Google adwords tracking script once a form has been completed

Question

Is there a way of creating a javascript event listener in a form, so that when a user completes that form, a trigger (event-listener) is created.

This trigger(event-listener) is then picked up by a separate HTML page which I have built and solely runs the google adwords tracking script.

So that I am able to track exactly where the user has come from in order to complete my form.

Answer 1

Use a form with a hidden input field:

You can capture the current utm params from the URL, and use these in your <form> in a hidden <input> :

Javascript:

// Get the utm-params from the URL
// You can add some logic yourself to get only the utm-param(s) you need.
let utmParams = location.search;

// Set utmParams as the input value
document.getElementById("utm-values").value = utmParams;

HTML:

<input id="utm-values" type="hidden" value="" />

On submit , these values will now be carried over to your new page.

---

Alternatively, you can use an eventListener:

If you really need an event listener, than create your own submit button and script.

HTML:

<form id="myForm">
    ...
    <button id="mySubmit">Submit</button>
</form>

Javascript:

// Reference the form element
let form = document.getElementById("myForm");

// Submit the form through javascript
// Here you can add your own code, before the actual submitting
document.getElementById("mySubmit").addEventListener("click", function () {
    form.submit();
});