Many contact forms now use Javascript to submit and do not redirect to a new page. So to track the form, unless you trigger an event on the submit button, you need to listen for a piece of text (usually saying thank you).

our contact form with a javascript implementation

We have created a custom HTML script that listens to the changes in the page and triggers an event called ‘formSubmitted’.

This event can then be used to fire a separate tag with event details to Google Analytics.

We’ve tested this on our contact form at Littledata and here’s how you can set it up too.

Step 1

The first step is to go through the contact form and see what the steps are in completing it.

On ours, you just enter the information in the fields and press “SUBMIT MESSAGE”. When the message is sent out, the button will say “SENT!”. Here the only thing that changed was the text on the button from ‘submit message’ to ‘sent’.

how the contact form looks like after submition

We built this HTML script that listens to the changes on the page, but you’ll need to change line 10 to be whatever the message is in your form.

You will also need to change line 15 if you have multiple forms on the page.


<script>

// **** Littledata Javascript form tracker ****
// Generates a GTM custom event called 'formSubmitted'
// When an on-page form is submitted

// CHANGE the text to match the message displayed
// when the form is successfully completed
// It is not case sensitive
var text = "sent!"

// By default it will search for text within the first form
// Set to false if text is outside a form
// or change to a higher false if there are multiple forms
var formIndex = 0;

// OPTIONALLY, restrict the search to an HTML element ID
// If you leave this blank, the whole page will be searched;
// this causes the script to run more slowly
var targetId = ""

// **** No changes needed to the script below ****

text = text.toLowerCase()
dataLayer = dataLayer || [];
if (!formIndex && targetId.length == 0) console.error('Form tracker needs either a form or an element ID')

var checkEveryMilliseconds = 500;

formTrackerInterval = window.setInterval(function(){
var target = ""
if (formIndex >= 0) {
var form = document.getElementsByTagName('form')
target = (form.length > 0) ? form[formIndex].textContent : "";
}
else target = document.getElementById(targetId).textContent
target = target.toLowerCase()
if (target.indexOf(text) > -1) {
window.clearInterval(formTrackerInterval);
dataLayer.push({
event: 'formSubmitted'
})
}

},checkEveryMilliseconds)

</script>

Step 2

Now we need to add the script to listen out for when the form is submitted.

  1. Create a custom HTML tag in your GTM container.
  2. You can name the tag ‘LISTENER Contact form submit event’ or anything else you will remember it by.
  3. Choose the tag type ‘Custom HTML’.
  4. Copy and paste your HTML/Javascript into the textbox, and remember to change the var text (line 10) with your own text.
HTML custom tag that listen to a form submition

Step 3

This tag needs a firing trigger, specifying the rules when it needs to be activated.

If you can, only fire on specific pages – the script will slow down the page a little, as it runs every half a second to check the form.

Give the trigger a descriptive name – here I’ve chosen “PAGE About us”

Select trigger type as ‘Custom Event’ and for the event name put ” gtm.load “, which means this trigger at page load.

We want this trigger to work on a specific page only, so the firing rule goes ‘page path equals /about-us’, which means that our trigger will work on the www.littledata.io/about-us page only.

If you have a number of pages that have the form you’re tracking, then you could use ‘contains’ rule and select part of the link that is applicable to all. For example, if all of your links have word ‘contact’ in them, then your firing rule would say ‘page path contains contact’.

Trigger for just a particular page for Tag Manager

Step 4

Now that you have your listener tag set up, you need to create a separate tag to send the event details to Google Analytics.

Again, give it a descriptive name so you know what it’s for – here I’ve used ‘GA event – contact form submitted’.

Select tag type as ‘Universal Analytics’ and in the tracking ID field, select the variable that contains your GA tracking id.

For event category, action and label you have to specify the namings by which this data will be categorised in Google Analytics.

Google tag manager event tag setup for analytics

Step 5

This tag needs its own trigger to know when to fire, and here you have to use the event created by the listener tag set up during steps 2-3.

Here you have to specify that this tag can only fire when event ‘formSubmitted’ happens.

I’ve called my trigger ‘Contact form event’, selected trigger type as ‘custom event’ and entered event name ‘formSubmitted.

create a trigger for some pages

Now you can save it and test in the debugger mode. Try submitting your contact form and see if the event ‘formSubmitted’ appears. You should also see the tag ‘GA event – contact form submitted’ fire.

If everything’s ok, publish the container and do a final test. Make a new form submission and check if you can see the event details come through in Google Analytics real time reports, under events.

Need some help setting this up or Google Tag Manger? Why not get in touch by contacting our lovely Google Analytics experts?

 

Get Social! Follow us on LinkedIn, Twitter, and Facebook and keep up-to-date with our Google Analytics insights.

Further reading:

mm
Alexandra

Previously led retail and digital marketing for LEGO Certified Stores and PANDORA. She’s experienced in PPC, affiliate, e-commerce, travel and news websites. She has a Master's degree in economic analysis.

View all posts

10 Responses

  • Brett 2 years ago

    Hi,

    I’m having an issue where when the text changes following form submission, the formSubmit event occurs continuously until I refresh the page, which would result in hundreds of duplicated conversions. Have you encountered this problem and is there a workaround?

    Thanks

    • mm

      Alexandra 2 years ago

      Hi Brett,

      Did you implemented step 3: If you set a trigger to fire on all events on the page, then it will launch the script multiple times – and it will conflict.

      The trigger should be for page load only, when the page URL contains about-us (or what you Page Path is)

      Thanks,

      • Brett 2 years ago

        Hi,

        Thanks for your response. For this particular site, it is a one-page website with a form at the bottom. The website does however contain other functionality (like a “Try-A-Free-Sample”) call to action that, when clicked, changes the URL.

        When I go straight to the form upon entering the site and submit, without clicking anywhere else, the tags fire properly. When I use this other functionality however, then submit the form — so enter the site, click the CTA (which changes the URL), then complete the form — my tags fire continuously until I refresh the page.

        • mm

          Edward 2 years ago

          Hi Brett – it sounds like the interval timer, which checks for the on-page text is not getting cleared, possibly because of the change of URL. If you email us with the website details we can take a look.

  • Elliot 2 years ago

    I tried this but it hasn’t worked, doesn’t record all events. I tested it and it only recorded 2 of 4 events and 0 of 2 events by my colleague. Any suggestions?

    • mm

      Alexandra 2 years ago

      Hi Elliot,
      Did you try to put in preview mode the Tag Manager and test it this way so you can see what is blocking the triggers?

      • Elliot 2 years ago

        Looking at the preview mode everything fired properly.

        I have tried 3 times this morning, twice on desktop and once on mobile. I saw events come through on Analytics real time for the 2 x desktop test submissions, but nothing for mobile test. My colleague also tried on desktop but nothing came through, so 4 tests with a 50% success rate.

        • mm

          Alexandra 2 years ago

          Hi Elliot,

          For your colleague is she using an IP that is filtered out? Do you see her sessions in real time? What browser is she using? And what phone are you using for testing? Do you have a responsive website or a different one for lower screens? Is the thank you text the same on desktop and mobile?

        • Elliot 2 years ago

          Colleague is, I assume, on the same IP as me. However that doesn’t explain why it register 2 conversions from me (on the same IP) and not him. Chrome used in all instances, apart from on mobile (iPhone 6s) which was safari and using cellular data, not wifi.

          I saw his sessions in real time.

          Confirmation message is the same on mobile as desktop. Site is the same on desktop and mobile.

        • mm

          Edward 2 years ago

          Hi Elliot – sounds like there may be a bug with the script of safari mobile. If you email us with the website details we can take a look.