Running js on submit of a form or on success

[lpearson-trek10]

Looking to track conversions from Linkedin on a form. LinkedIn gives us a snippet of code like window.lintrk('track', { conversion_id: <id goes here> }); (which I understand that lintrk comes from LinkedIn attaching itself to window). I am wondering how I can run this either on submit of the freeform or when we have a success form submission. Any help is appreciated!

[gustavs-gutmanis]

Hi @lpearson-trek10!

Thanks for the question.
You would have to write an event listener that listens to form submit events. The documentation for it is here

Assuming that you're using AJAX to submit forms, it would look something like this:

const myForm = document.getElementById("my-form");
myForm.addEventListener("freeform-ajax-success", function (event) {
  const form = event.form;
  const response = event.response;

  window.lintrk('track', { conversion_id: response.submissionId })
});

[lpearson-trek10]

Can I do this straight in the form editor itself or is this part of the template? Also, how do I get the form id?

[gustavs-gutmanis]

You would probably do this in a template, depends on your setup, really.
Lets assume you have a template where you render the form.

{% set form = craft.freeform.form("myForm") %}

{# Rendering your form #}
{{ form.render }}

{# Add your javascript here #}
<script type="text/javascript">
  const myForm = document.getElementById("my-form");
  myForm.addEventListener("freeform-ajax-success", function (event) {
    const form = event.form;
    const response = event.response;

    window.lintrk('track', { 
      conversion_id: response.submissionId,
      form_id: {{ form.id }},
    })
  });
</script>

Notice that you would be getting the form ID from the twig form instance, rather than the response object.