Forms and leads examples

How many people start your demo form and how many send it? Where do the others give up? Which newsletter box brings subscribers? Autocapture sees a little of this. Two custom events see all of it, without sending a word anyone types.

Updated

The snippets assume the script tag and the queue stub are in the page’s <head>. The data-… attributes are for your own script; ClickClacks doesn’t read them.

How many people start the demo form, and how many send it?

Fastest: autocapture and a thank-you page

Clicks into form fields arrive as $click with Clicked element input or textarea, on the form’s Page, and never with any text. That is a rough “started”. A submit <button> sends its label as Clicked text, but a click isn’t a successful submission: the browser may refuse the form, or your server may. An <input type="submit"> carries no text at all.

If a successful submission lands on its own page, such as /demo/thanks, that page’s $pageview is a reliable “submitted” with no code.

Precise: “started” and “submitted” events

demo.html
<form data-form="demo-request" action="/demo" method="post">
  <input name="company" autocomplete="organization">
  <input name="work_email" type="email" autocomplete="email">
  <button type="submit">Request a demo</button>
</form>

<script>
  document.querySelectorAll('form[data-form]').forEach(function (form) {
    var name = form.dataset.form
    var started = false

    // The first time anyone moves into a field of this form.
    form.addEventListener('focusin', function () {
      if (started) return
      started = true
      window.clickclacks?.('event', 'Form started', { form: name })
    })

    // Fires after the browser's own validation passes.
    form.addEventListener('submit', function () {
      window.clickclacks?.('event', 'Form submitted', { form: name })
    })
  })
</script>

Forms sent with fetch never fire a page load, and their submit event fires before your server has answered. Send Form submitted when the request succeeds instead:

demo-form.js
async function sendDemoRequest(form) {
  const response = await fetch('/api/demo-requests', { method: 'POST', body: new FormData(form) })
  if (response.ok) {
    window.clickclacks?.('event', 'Form submitted', { form: 'demo-request' })
  }
  return response
}

Read the answer

  1. In Funnels, click New funnel. Step 1: Form started, + Filter › Form is demo-request.
  2. Step 2: Form submitted with the same filter. Save it as Demo form.
  3. Read Overall conversion and Median time to convert.
  4. Click the drop to see who started and never sent it, and open What they did instead.
  5. Choose Break down by › Device to check whether one device struggles.

To see how many visitors to /demo start the form at all, add a step before both: $pageview where Page is /demo.

How many people join the newsletter, from which box and which campaign?

Fastest: autocapture, for clicks only

A Subscribe button sends its label as Clicked text, and Page says which page it was on. That counts attempts, including invalid addresses and people already subscribed, not sign-ups.

Precise: an event after the sign-up succeeds

footer.html
<form id="newsletter" data-placement="footer">…</form>

<script>
  var newsletter = document.getElementById('newsletter')
  newsletter.addEventListener('submit', function (event) {
    event.preventDefault()
    fetch('/api/newsletter', { method: 'POST', body: new FormData(newsletter) })
      .then(function (response) {
        if (!response.ok) return
        // After the subscription succeeded, never with the address.
        window.clickclacks?.('event', 'Newsletter joined', {
          placement: newsletter.dataset.placement,
        })
      })
  })
</script>

Read the answer

  1. In Insights, chart Newsletter joined as Unique people, Weekly.
  2. Add breakdown › Event property › Placement to compare the footer box with the others.
  3. Change the breakdown to UTM source or Referrer. They are the visit’s values, so a sign-up three pages after landing still counts toward the campaign that brought the visit.
  4. For a sign-up rate, set series A to $pageview as Unique people, series B to Newsletter joined, and add the formula B / A * 100.

Keep form data out

  • Never send what people type, such as an email address, name or company, as a property. Send which form, which step and whether it worked.
  • Autocapture never records field values or the text of anything clicked inside a field. See what autocapture never captures.
  • To tie a lead to a person you already know, call identify with your own user ID, not their email.
  • Mark anything else sensitive with data-cc-mask: clicks inside it carry no text, and heatmap captures leave it out.

Related