Documentation

Get Started with zForms

Everything you need to integrate privacy-first form analytics into your website in minutes.

Quick Start

1. Install the SDK

npm install @zforms/tracker

2. Initialize in your app

import { ZFormsTracker } from '@zforms/tracker';

// Initialize with your project ID
const tracker = new ZFormsTracker({
  projectId: 'your-project-id',
  apiKey: 'your-api-key',
});

// Start tracking a form
tracker.trackForm('#my-form');

3. View analytics

Head to your dashboard to see real-time form analytics, AI-powered insights, and conversion metrics.

Core Features

Privacy-First Tracking

We never collect form field values or PII. Only metadata like focus events, time spent, and field interactions.

  • • No form data collection
  • • GDPR & CCPA compliant
  • • Anonymized session IDs
  • • Cookie-less tracking option

Advanced Analytics

Get deep insights into form performance with AI-powered analysis and recommendations.

  • • Field-level drop-off tracking
  • • Time-to-complete analysis
  • • Error and validation insights
  • • AI-powered suggestions

Framework Agnostic

Works with any JavaScript framework or plain HTML. Zero dependencies, minimal footprint.

  • • React, Vue, Angular support
  • • Vanilla JavaScript
  • • TypeScript types included
  • • <5KB gzipped

Real-Time Tracking

See form interactions as they happen with live session monitoring and instant insights.

  • • Live session viewer
  • • Real-time alerts
  • • WebSocket-powered
  • • Sub-second latency

Installation Options

NPM Package

npm install @zforms/tracker

Recommended for React, Vue, Angular, and other modern JavaScript frameworks.

CDN Script Tag

<script src="https://cdn.zforms.xyz/tracker.js"></script>
<script>
  ZForms.init({
    projectId: 'your-project-id',
    apiKey: 'your-api-key'
  });
</script>

Perfect for simple websites and quick prototyping.

Framework-Specific Plugins

React

npm install @zforms/react

Vue

npm install @zforms/vue

Angular

npm install @zforms/angular

Next.js

npm install @zforms/nextjs

Configuration Options

const tracker = new ZFormsTracker({
  projectId: 'your-project-id',        // Required
  apiKey: 'your-api-key',               // Required

  // Optional settings
  trackPageViews: true,                 // Track page navigation
  trackClicks: true,                    // Track button clicks
  captureErrors: true,                  // Capture validation errors
  enableAI: true,                       // Enable AI insights

  // Privacy settings
  anonymizeIP: true,                    // Anonymize IP addresses
  respectDNT: true,                     // Respect Do Not Track
  cookieConsent: true,                  // Require cookie consent

  // Advanced
  apiEndpoint: 'https://api.zforms.xyz',
  batchSize: 10,                        // Batch events
  flushInterval: 5000,                  // Flush every 5s
});

All configuration options are documented in detail in our API Reference.

Common Use Cases

Track a Contact Form

tracker.trackForm('#contact-form', {
  name: 'Contact Form',
  category: 'lead-generation'
});

Track a Multi-Step Form

tracker.trackForm('#signup-form', {
  name: 'Signup Flow',
  multiStep: true,
  steps: ['personal-info', 'payment', 'confirmation']
});

Custom Event Tracking

tracker.track('form_abandoned', {
  formId: 'checkout-form',
  completionPercentage: 65,
  lastField: 'credit-card'
});