TrustedForm Advanced Implementation Guide

TrustedForm Advanced Implementation Guide

Overview

This guide covers advanced TrustedForm implementation techniques for complex use cases, including callback functions, manual certificate control, dynamic forms, and custom integrations.

What You'll Learn

Callback Implementation

Basic Callback Setup

TrustedForm supports callbacks that fire after certificate generation:

// Define callback before loading TrustedForm script
<script type="text/javascript">
  // Certificate ID callback
  function trustedFormCertIdCallback(certificateId) {
    console.log("Certificate ID:", certificateId);
    // Your custom logic here
    trackEvent('certificate_generated', certificateId);
  }
  
  // Full URL callback
  function trustedFormCertUrlCallback(certificateUrl) {
    console.log("Certificate URL:", certificateUrl);
    // Store URL or trigger actions
    window.tfCertUrl = certificateUrl;
  }
</script>

// Then load TrustedForm script
<script type="text/javascript">
  (function() {
    var tf = document.createElement('script');
    tf.type = 'text/javascript'; tf.async = true;
    tf.src = ("https:" == document.location.protocol ? 'https' : 'http') + 
             "://api.trustedform.com/trustedform.js?field=xxTrustedFormCertUrl&ping_field=xxTrustedFormPingUrl&l=" + 
             new Date().getTime() + Math.random();
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(tf, s);
  })();
</script>

Advanced Callback Usage

Analytics Integration

function trustedFormCertIdCallback(certificateId) {
  // Google Analytics 4
  gtag('event', 'trustedform_cert_generated', {
    'certificate_id': certificateId,
    'page_location': window.location.href,
    'form_id': document.querySelector('form').id
  });
  
  // Facebook Pixel
  fbq('trackCustom', 'TrustedFormGenerated', {
    certId: certificateId
  });
  
  // Custom analytics
  analytics.track('Certificate Generated', {
    certificateId: certificateId,
    timestamp: new Date().toISOString()
  });
}

Form Validation Enhancement

function trustedFormCertUrlCallback(certificateUrl) {
  // Enable submit button only after certificate is ready
  const submitButton = document.getElementById('submit-btn');
  submitButton.disabled = false;
  submitButton.textContent = 'Submit Application';
  
  // Add certificate to form data
  const certField = document.createElement('input');
  certField.type = 'hidden';
  certField.name = 'trustedform_cert_url';
  certField.value = certificateUrl;
  document.querySelector('form').appendChild(certField);
}

Progressive Disclosure

function trustedFormCertIdCallback(certificateId) {
  // Show next form section after certificate generation
  document.getElementById('section-2').style.display = 'block';
  
  // Update progress indicator
  updateProgress(50);
  
  // Log timing for optimization
  const loadTime = performance.now() - window.pageLoadTime;
  console.log(`Certificate ready in ${loadTime}ms`);
}

Manual Certificate Control

Stopping Recording Programmatically

Control when TrustedForm stops recording:

// Method 1: Using the stop function
function stopTrustedFormRecording() {
  if (typeof tf_stop === 'function') {
    tf_stop();
    console.log('TrustedForm recording stopped');
  }
}

// Method 2: Triggering via custom events
document.getElementById('final-submit').addEventListener('click', function() {
  // Stop recording
  stopTrustedFormRecording();
  
  // Then submit form
  setTimeout(() => {
    document.getElementById('lead-form').submit();
  }, 100);
});

Manual Trigger Implementation

For forms that don't auto-submit traditionally:

// Custom submission handler
function handleCustomSubmission() {
  // Collect form data
  const formData = new FormData(document.getElementById('custom-form'));
  
  // Manually trigger TrustedForm
  if (window.__tf && window.__tf.trigger) {
    window.__tf.trigger();
  }
  
  // Wait for certificate then submit
  setTimeout(() => {
    const certUrl = document.querySelector('[name="xxTrustedFormCertUrl"]').value;
    if (certUrl) {
      formData.append('certificate', certUrl);
      submitToAPI(formData);
    }
  }, 500);
}

Delayed Certificate Insertion

For dynamic forms that build over time:

// Wait for form to be ready
function initTrustedFormWhenReady() {
  const checkForm = setInterval(() => {
    const form = document.querySelector('#dynamic-form');
    if (form && form.querySelector('input[name="email"]')) {
      clearInterval(checkForm);
      
      // Now inject TrustedForm
      injectTrustedFormScript();
    }
  }, 100);
}

function injectTrustedFormScript() {
  const script = document.createElement('script');
  script.src = 'https://api.trustedform.com/trustedform.js?field=xxTrustedFormCertUrl';
  script.async = true;
  document.head.appendChild(script);
}

Dynamic Form Implementations

Single Page Applications (SPAs)

Handle certificate generation in SPAs:

// React example
import { useEffect, useState } from 'react';

function LeadForm() {
  const [certUrl, setCertUrl] = useState('');
  
  useEffect(() => {
    // Define callback
    window.trustedFormCertUrlCallback = (url) => {
      setCertUrl(url);
    };
    
    // Load TrustedForm
    const script = document.createElement('script');
    script.src = 'https://api.trustedform.com/trustedform.js';
    script.async = true;
    document.body.appendChild(script);
    
    return () => {
      // Cleanup
      document.body.removeChild(script);
    };
  }, []);
  
  const handleSubmit = (formData) => {
    formData.certificateUrl = certUrl;
    // Submit logic
  };
  
  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      <input type="hidden" name="xxTrustedFormCertUrl" value={certUrl} />
    </form>
  );
}

Multi-Step Forms

Maintain certificate across form steps:

// Step 1: Initialize and store certificate
let trustedFormCertificate = {
  id: null,
  url: null,
  startTime: Date.now()
};

window.trustedFormCertIdCallback = function(certId) {
  trustedFormCertificate.id = certId;
};

window.trustedFormCertUrlCallback = function(certUrl) {
  trustedFormCertificate.url = certUrl;
  // Store in session for multi-step forms
  sessionStorage.setItem('tf_cert', certUrl);
};

// Step 2-N: Retrieve certificate
function getStoredCertificate() {
  return sessionStorage.getItem('tf_cert');
}

// Final step: Include in submission
function submitMultiStepForm(formData) {
  formData.trustedFormCert = getStoredCertificate();
  formData.formDuration = Date.now() - trustedFormCertificate.startTime;
  
  // Stop recording before submission
  if (typeof tf_stop === 'function') {
    tf_stop();
  }
  
  // Submit to server
  submitToAPI(formData);
}

AJAX Form Submissions

Handle forms that submit without page reload:

// Intercept form submission
document.getElementById('ajax-form').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const formData = new FormData(this);
  const certUrl = document.querySelector('[name="xxTrustedFormCertUrl"]').value;
  
  if (!certUrl) {
    alert('Please wait for the form to fully load');
    return;
  }
  
  // Add certificate to AJAX request
  fetch('/api/submit-lead', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      ...Object.fromEntries(formData),
      trustedform_cert: certUrl
    })
  })
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      // Stop recording on success
      if (typeof tf_stop === 'function') {
        tf_stop();
      }
      showSuccessMessage();
    }
  });
});

Platform-Specific Implementations

WordPress with Gravity Forms

Custom implementation for Gravity Forms:

// Add to theme's JavaScript file
jQuery(document).ready(function($) {
  // Define callback
  window.trustedFormCertUrlCallback = function(certUrl) {
    // Add to all Gravity Forms
    $('.gform_wrapper form').each(function() {
      if (!$(this).find('input[name="trustedform_cert"]').length) {
        $(this).append('<input type="hidden" name="trustedform_cert" value="' + certUrl + '">');
      }
    });
  };
  
  // Hook into Gravity Forms submission
  $(document).on('gform_confirmation_loaded', function(event, formId) {
    // Stop recording after successful submission
    if (typeof tf_stop === 'function') {
      tf_stop();
    }
  });
});

Unbounce Landing Pages

Advanced Unbounce implementation:

// Unbounce script (Before Body End Tag)
<script>
  // Wait for Unbounce form
  window.ub.hooks.afterFormSubmit.push(function(args) {
    // Get certificate URL
    var certUrl = document.querySelector('[name="xxTrustedFormCertUrl"]').value;
    
    // Add to form data
    args.formData.trustedform_certificate = certUrl;
    
    // Stop recording
    if (typeof tf_stop === 'function') {
      tf_stop();
    }
    
    // Log for debugging
    console.log('Form submitted with certificate:', certUrl);
  });
  
  // Handle certificate callback
  window.trustedFormCertIdCallback = function(certId) {
    // Track in Unbounce goals
    window.ub.form.customValidators.trustedform = {
      isValid: function() { return true; },
      message: 'Certificate generated: ' + certId
    };
  };
</script>

HubSpot Forms

Integrate with HubSpot's embedded forms:

// After HubSpot form embed code
<script>
  window.addEventListener('message', function(event) {
    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
      // Form is ready, ensure TrustedForm is loaded
      if (!window.trustedFormLoaded) {
        loadTrustedFormScript();
      }
    }
    
    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
      // Get certificate and add to submission
      const certUrl = document.querySelector('[name="xxTrustedFormCertUrl"]').value;
      
      // Send to your server with the certificate
      trackFormSubmission(event.data.data, certUrl);
      
      // Stop recording
      if (typeof tf_stop === 'function') {
        tf_stop();
      }
    }
  });
</script>

Advanced Certificate Handling

Certificate Validation

Validate certificate before submission:

async function validateCertificate(certUrl) {
  try {
    // Extract certificate ID
    const certId = certUrl.split('/').pop();
    
    // Validate format
    if (!certId.match(/^[0-9a-f]{40}$/)) {
      throw new Error('Invalid certificate format');
    }
    
    // Optional: Pre-check certificate exists
    const response = await fetch(`/api/validate-cert/${certId}`);
    const data = await response.json();
    
    return data.valid;
  } catch (error) {
    console.error('Certificate validation failed:', error);
    return false;
  }
}

// Use in form submission
async function handleFormSubmit(formData) {
  const certUrl = formData.get('xxTrustedFormCertUrl');
  
  if (!await validateCertificate(certUrl)) {
    alert('Please wait for the security certificate to generate');
    return false;
  }
  
  // Proceed with submission
  submitForm(formData);
}

Certificate Metadata

Capture additional context with the certificate:

function enhanceCertificateData(certId) {
  return {
    certificate_id: certId,
    page_url: window.location.href,
    referrer: document.referrer,
    user_agent: navigator.userAgent,
    timestamp: new Date().toISOString(),
    form_fields: getFormFieldNames(),
    page_metadata: {
      title: document.title,
      form_id: document.querySelector('form').id,
      session_duration: getSessionDuration()
    }
  };
}

window.trustedFormCertIdCallback = function(certId) {
  const enhancedData = enhanceCertificateData(certId);
  
  // Store for submission
  window.certificateMetadata = enhancedData;
  
  // Send to analytics
  analytics.track('Certificate Enhanced', enhancedData);
};

Performance Optimization

Lazy Loading

Load TrustedForm only when needed:

// Intersection Observer approach
const formObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // User can see the form, load TrustedForm
      loadTrustedFormScript();
      formObserver.disconnect();
    }
  });
}, { threshold: 0.1 });

// Observe the form
const form = document.getElementById('lead-form');
if (form) {
  formObserver.observe(form);
}

Preloading Strategy

For multi-page funnels:

// Preload on previous page
function preloadTrustedForm() {
  const link = document.createElement('link');
  link.rel = 'preload';
  link.as = 'script';
  link.href = 'https://api.trustedform.com/trustedform.js';
  document.head.appendChild(link);
}

// On page with form
function initTrustedForm() {
  // Script loads faster due to preload
  const script = document.createElement('script');
  script.src = 'https://api.trustedform.com/trustedform.js';
  script.async = true;
  document.body.appendChild(script);
}

Debugging and Troubleshooting

Debug Mode Implementation

// Enable debug mode
window.TRUSTEDFORM_DEBUG = true;

// Enhanced callbacks with debugging
window.trustedFormCertIdCallback = function(certId) {
  if (window.TRUSTEDFORM_DEBUG) {
    console.group('TrustedForm Debug Info');
    console.log('Certificate ID:', certId);
    console.log('Page URL:', window.location.href);
    console.log('Form detected:', document.querySelector('form'));
    console.log('Timestamp:', new Date().toISOString());
    console.groupEnd();
  }
  
  // Your normal callback logic
  processCertificate(certId);
};

// Monitor for issues
window.addEventListener('error', function(event) {
  if (event.filename && event.filename.includes('trustedform')) {
    console.error('TrustedForm Error:', event.message);
    // Report to your error tracking
  }
});

Common Issues and Solutions

// Ensure callback is defined first
console.log('Callback defined:', typeof trustedFormCertIdCallback);
// Should output: "function"

// Check for script conflicts
if (window.jQuery) {
  jQuery.noConflict();
}

// Wait for form to exist
function waitForForm(callback) {
  const checkInterval = setInterval(() => {
    if (document.querySelector('form')) {
      clearInterval(checkInterval);
      callback();
    }
  }, 100);
}

waitForForm(() => {
  loadTrustedFormScript();
});

Security Considerations

Certificate Protection

Protect certificate URLs from tampering:

// Encrypt certificate data
function protectCertificate(certUrl) {
  // Create signature
  const timestamp = Date.now();
  const signature = generateHMAC(certUrl + timestamp, SECRET_KEY);
  
  return {
    cert: certUrl,
    ts: timestamp,
    sig: signature
  };
}

// Verify on server side
function verifyCertificate(data) {
  const expectedSig = generateHMAC(data.cert + data.ts, SECRET_KEY);
  return data.sig === expectedSig;
}

Rate Limiting

Prevent certificate abuse:

// Client-side rate limiting
const certificateRateLimit = {
  count: 0,
  resetTime: Date.now() + 3600000, // 1 hour
  
  canGenerate() {
    if (Date.now() > this.resetTime) {
      this.count = 0;
      this.resetTime = Date.now() + 3600000;
    }
    return this.count < 10; // Max 10 per hour
  },
  
  increment() {
    this.count++;
  }
};

window.trustedFormCertIdCallback = function(certId) {
  if (certificateRateLimit.canGenerate()) {
    certificateRateLimit.increment();
    processCertificate(certId);
  } else {
    console.warn('Certificate rate limit exceeded');
  }
};

Next Steps

Additional Resources

• TrustedForm JavaScript Documentation
• Implementation Examples Repository
• Developer Community Forum