How to Track Form Submissions, Button Clicks, and File Downloads

Most analytics tools track pageviews automatically. But the actions that actually matter — form submissions, button clicks, and file downloads — require custom event tracking. These interactions tell you whether visitors are engaging with your calls-to-action or just passing through.

In this guide, I’ll give you ready-to-use code patterns for tracking the three most common interaction types, along with best practices for keeping your data clean and your site GDPR-compliant.

Tracking Form Submissions

Form tracking is essential for lead generation. Here’s the approach I use:

document.querySelectorAll('form[data-track]').forEach(function(form) {
  form.addEventListener('submit', function(e) {
    trackEvent('form_submit', {
      form_name: this.dataset.track,
      page: window.location.pathname
    });
  });
});

// HTML: <form data-track="contact-form" action="/submit">

Critical rule: track the submission event, never the field values. Recording email addresses, phone numbers, or messages in your analytics violates GDPR data minimization principles and creates unnecessary liability.

Handling AJAX Forms

Single-page apps and AJAX forms don’t trigger a page reload on submission. Listen for the form’s success callback instead of the submit event, and fire the tracking event only after the server confirms receipt.

Thank-You Page Method

The simplest approach: redirect to a unique thank-you URL after submission and track the pageview. This works with any analytics tool, requires no JavaScript knowledge, and is easy to verify. The downside: if users bookmark or share the thank-you URL, you get false positives.

Tracking Button Clicks

Not all buttons submit forms. CTA buttons, pricing toggles, feature expanders, and navigation elements all deserve tracking when they represent meaningful user intent.

document.querySelectorAll('[data-track-click]').forEach(function(el) {
  el.addEventListener('click', function() {
    trackEvent('button_click', {
      button_id: this.dataset.trackClick,
      button_text: this.textContent.trim().substring(0, 50),
      page: window.location.pathname
    });
  });
});

// HTML: <button data-track-click="hero-cta">Start Free Trial</button>

Be selective. Don’t track every button on the page. Focus on buttons that answer a business question: “How many people click the pricing CTA?” or “Does anyone use the secondary navigation?” Tracking 50 buttons creates noise without insight.

Tracking File Downloads

PDFs, whitepapers, templates, and media files are valuable micro-conversions. Many privacy-first tools track downloads automatically for common file types. For custom tracking:

var fileExtensions = ['.pdf', '.zip', '.xlsx', '.docx', '.csv'];
document.querySelectorAll('a').forEach(function(link) {
  fileExtensions.forEach(function(ext) {
    if (link.href.endsWith(ext)) {
      link.addEventListener('click', function() {
        trackEvent('file_download', {
          file_name: this.href.split('/').pop(),
          file_type: ext.replace('.', ''),
          page: window.location.pathname
        });
      });
    }
  });
});

Organizing Your Tracking Events

Keep a tracking plan document that maps every tracked event to a business question:

This document prevents tracking drift — where events accumulate over time without anyone remembering why they’re there.

Testing Your Tracking

1. Open DevTools → Network tab, filter by your analytics domain
2. Trigger each event (submit form, click button, download file)
3. Verify the network request fires with correct event name and properties
4. Check your analytics real-time view to confirm the event appears
5. Test on mobile — touch events sometimes behave differently from click events

Privacy Best Practices

• Never capture form input values — only the fact that submission occurred
• Truncate button text to avoid accidentally capturing dynamic content with personal data
• File download tracking is generally low-risk since file names rarely contain personal data
• Use privacy-first analytics tools that count events in aggregate

What’s Next

Form submissions, button clicks, and file downloads are the three most actionable interaction types on any website. Set them up once with the data-attribute pattern, and they’ll work across your entire site without per-page configuration. Build your funnel around these events to connect engagement to conversions.