FormBuilder and Google Analytics

[JoshoB]

So I've been using FormBuilder on client websites, but now they want to be able to track the form output using Google Analytics. 

I have no idea how they should go about this. Any suggestions that I could pass onto them? 

Thank you very much! 

[MoritzLost]

What do you mean by form output? Generelly, forms are used for input ?

The first step is to determine which interactions you want to track. For example, you could track an event:

1. ... whenever a form is successfully submitted.
2. ... whenever a form is partially filled but then abandoned.
3. ... each time somebody fills out an individual field (will result in many events).
4. ... whenever somebody finishes an individual step of a multi-step form.

Beyond that, you first need to determine what your client wants to know, in terms of specific metrics, interactions etc.

Most of those you can do with simple event handlers reacting to form changes, inputs and button clicks.

// find all formbuilder forms on the page
const FormBuilderForms = Array.from(document.querySelectorAll('form.FormBuilder'));
// track the submit button
FormBuilderForms.forEach(form => form.addEventListener('submit', e => {
  	// this assumes you're using gtag.js with transport mechanism 'beacon'
	gtag('event', 'form_submitted', {/** add additional information based on the form data */});
});

A bit more tricky is tracking submissions only after they've been validated server-side, since you can't catch that with JavaScript. However, after submitting a form you will usually show a success message or redirect to a dedicated thank you page, so you can just track those:

// FormBuilder uses this ID for the submission message
const FormBuilderSuccess = document.getElementById('FormBuilderSubmitted');
if (null !== FormBuilderSuccess) {
	gtag('event', 'form_submission_result', {/** track the name + result of this submission */});
}

Does that answer your question? It's just a matter of determining what you want to track, and then adding appropriate event handlers with JavaScript.

[asbjorn]

Google Tag Manager is useful to track form events. It is how I have tracked visitors use of forms earlier. In addition to the method @MoritzLost suggest, there are ways to track this in the Google Tag Manager admin based on IDs and classes.

[JoshoB]

Cheers, this is helpful!