04-provenance-and-values.html

<!doctype html>
<!--
  Where they came from, prefilled and hidden values. Tells Subcontext where a
  lead came from (campaign tags, ad click ids), prefills what you already
  know, and sends hidden values with every lead. The page itself (its
  address, the referring page, title, language, time zone, and any utm_* tag
  or ad click id in the address) is collected automatically. Values you set
  yourself take priority.

  Replace lfk_YOUR_KEY with your form's key, and the stand-in member and
  click id with values from your own site.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lead form: where they came from</title>
</head>
<body>
  <h1>Where they came from, prefilled and hidden values</h1>
  <p>Each lead says where the visitor came from. The form reads this from the page, and you can add
    more. Send either form and what it sent is shown below.</p>
  <p>Try it with tags in the address:
    <a href="?utm_source=newsletter&amp;utm_campaign=october&amp;fbclid=TEST-FBCLID">add utm_source, utm_campaign and fbclid</a>.
    Tags in the page address are sent inside <code>provenance.page_url</code>. The ones you set are sent as
    <code>provenance.utm</code> and <code>provenance.click_ids</code>, and take priority.</p>

  <h2>1. On the element: a flyer campaign, and the product page they were on</h2>
  <div data-subcontext-leadform
       data-fields="first_name, email, phone"
       data-utm-source="print"
       data-utm-medium="flyer"
       data-utm-campaign="spring-2026"
       data-value-product-page="van-insurance"></div>

  <h2>2. From code: a signed-in member, prefilled</h2>
  <div id="member-form"></div>

  <h2>What was sent</h2>
  <ol id="log"></ol>

  <script>
    // For this demo only: shows what each lead sends. A real site doesn't need this.
    var realFetch = window.fetch
    window.fetch = function (url, init) {
      if (String(url).indexOf('/api/v1/leadform/leads') !== -1 && init && init.body) {
        var body = JSON.parse(init.body)
        var item = document.createElement('li')
        item.textContent = JSON.stringify({ lead: body.lead, provenance: body.provenance })
        document.getElementById('log').prepend(item)
      }
      return realFetch.apply(this, arguments)
    }

    // Replace these stand-ins with what your site already knows: the
    // signed-in visitor, and a click id you kept in a cookie on an earlier page.
    var member = { firstName: 'Ann', email: 'ann@example.com', id: 'M-1042' }
    var savedGclid = 'TEST-GCLID-FROM-COOKIE'

    window.addEventListener('subcontext:leadform:ready', function (event) {
      event.detail.init({
        target: '#member-form',
        title: 'Ask us anything',
        fields: ['first_name', 'email', 'message'],
        // first_name and email are on the form, so they are filled in (and
        // can be changed); member_id isn't, so it is sent hidden.
        values: { first_name: member.firstName, email: member.email, member_id: member.id },
        provenance: {
          utm: { source: 'members-area', medium: 'web' },
          click_ids: { gclid: savedGclid }
        },
        successTitle: 'Thanks, {first_name}',
        successMessage: "We'll reply to {email} soon."
      })
    })
  </script>

  <!-- lfk_YOUR_KEY: your form's key (starts lfk_). Find it in Subcontext on the lead form's Install tab. -->
  <script src="https://js.subcontext.com/leadform-latest.js" data-key="lfk_YOUR_KEY" defer></script>
</body>
</html>