Basic Form Integration #

This example shows how to add Veriform to a simple lead capture form.

Complete HTML Example #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Get a Quote</title>
</head>
<body>
  <h1>Request a Free Quote</h1>
  
  <form id="lead-form">
    <div>
      <label for="firstName">First Name</label>
      <input type="text" id="firstName" name="firstName" required>
    </div>
    
    <div>
      <label for="lastName">Last Name</label>
      <input type="text" id="lastName" name="lastName" required>
    </div>
    
    <div>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required>
    </div>
    
    <div>
      <label for="phone">Phone</label>
      <input type="tel" id="phone" name="phone" required>
    </div>
    
    <div>
      <label>
        <input type="checkbox" id="consent" name="consent" required>
        I agree to receive calls and texts at the number provided, including by 
        autodialer. Consent is not a condition of purchase.
      </label>
    </div>
    
    <!-- Veriform certificate URL - auto-populated by SDK -->
    <input type="hidden" id="recCertUrl" name="recCertUrl">
    
    <button type="submit">Get My Quote</button>
  </form>

  <!-- Veriform SDK -->
  <script
    src="https://cert.veriform.co/sdk.min.js"
    data-key="YOUR_API_KEY"
    defer
  ></script>
  
  <script>
    const form = document.getElementById('lead-form');
    
    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      
      // 1. Save the recording
      if (window.veriformSave) {
        try {
          await window.veriformSave();
        } catch (err) {
          console.error('Save error:', err);
        }
      }
      
      // 2. Get form data including certificate URL
      const formData = new FormData(form);
      const data = Object.fromEntries(formData);
      
      console.log('Lead data:', data);
      console.log('Certificate URL:', data.recCertUrl);
      
      // 3. Send to your backend
      // await fetch('/api/leads', {
      //   method: 'POST',
      //   headers: { 'Content-Type': 'application/json' },
      //   body: JSON.stringify(data)
      // });
      
      // 4. Redirect to certificate (or thank you page)
      window.location.href = data.recCertUrl;
    });
  </script>
</body>
</html>

Key Points #

Hidden Field: The <input type="hidden" id="recCertUrl"> is automatically populated by the SDK with the certificate URL.
Save Before Redirect: Always call await window.veriformSave() before navigating away to ensure the recording is saved.
Store the URL: Save the recCertUrl value with your lead record so you can retrieve the certificate later.

What Gets Captured #

The certificate will include:

✅ Full session replay video
✅ All form field interactions
✅ Consent checkbox click
✅ IP address and geolocation
✅ Browser and device info
✅ Timestamps

Sending to Your Backend #

Include the certificate URL when submitting to your CRM or backend:

const response = await fetch('/api/leads', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    firstName: form.firstName.value,
    lastName: form.lastName.value,
    email: form.email.value,
    phone: form.phone.value,
    consent: form.consent.checked,
    certificateUrl: document.getElementById('recCertUrl').value
  })
});

Your backend should store this certificateUrl with the lead record for future disputes.