Track form events with Matomo

Matomo Analytics is a powerful tool that our team uses every day. In this article, we will demonstrate how we send contact-us form information to Matomo.

We will use 2 great features in our example:

HTML Code:

<form id="contact-us-form" action="#" method="post">
    <!-- NAME -->
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" name="name">
    <!-- EMAIL -->
    <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" name="email">
    <!-- SUBJECT -->
    <div class="form-group">
        <label for="subject">Subject</label>
        <select class="form-control" name="subject">
            <option value="analytics">Analytics</option>
            <option value="crm">CRM</option>
            <option value="other">Other</option>
    <!-- BODY -->
    <div class="form-group">
        <label for="body">Comment</label>
        <input type="text" class="form-control" name="body">

    <!-- on button click call function sendFormData() before submit form -->
    <button type="submit" onclick="sendFormData();">

Main Javascript code in your CMS Layout:

<script type="text/javascript">
  var _paq = window._paq || [];
  (function() {
    var u="https://XXXXX/"; //set your matomo url
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', 'XXXX']); // set your matomo id
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);

Javascript code in your CMS page:

<script type="text/javascript">

function sendFormData(){

    //get form data field values

    var formElement = document.getElementById('contact-us-form');    
    var formData = new FormData(formElement);

        name = formData.get('name'); 

        //assign custom variable name to the visitor

        subject = formData.get('subject'); 

        //trigger event Contact Form with subject as action
        _paq.push(['trackEvent', 'Contact Form', subject]);

        //assign custom variable subject to the visitor



On Matomo dashboard, we can now collect custom variables and events on:

  • Contact Form Event Category: Conversion rate per visits by linking a goal to this event.
  • Subject Event Action: We know why visitors/leads contacted us the most. Note that we used a dropdown select to ensure consistent metrics.
  • Name variable: Understand how the lead interacted and landed on our website.