02-programmatic.html

<!doctype html>
<!--
  Set up from JavaScript: a drawn form with your own fields, wording and
  error messages, plus callbacks and page events. Every outcome is written
  to the list on the page.

  Replace lfk_YOUR_KEY with your form's key.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lead form: set up from JavaScript</title>
</head>
<body>
  <h1>Set up from JavaScript</h1>
  <p><code>Subcontext.leadform.init({ target: ... })</code> draws a form with your own fields, labels and
    messages instead of the designed one. Try sending it empty, then with a short message, then properly.
    Every outcome is listed below.</p>

  <div id="callback-form"></div>

  <h2>Events</h2>
  <ol id="log"></ol>

  <script>
    // For this demo only: adds a line to the list above.
    function log(label, detail) {
      var item = document.createElement('li')
      item.textContent = label + (detail === undefined ? '' : '  ' + JSON.stringify(detail))
      document.getElementById('log').prepend(item)
    }

    // Listen before the script loads. It fires the ready event once, as it loads.
    window.addEventListener('subcontext:leadform:ready', function (event) {
      var leadform = event.detail // the same as window.Subcontext.leadform
      log('ready', { version: leadform.version })

      var form = leadform.init({
        mode: 'head', // "draw the form". Optional: a target alone is enough.
        target: '#callback-form',
        title: 'Request a callback',
        intro: "Leave your number and we'll ring you back.",
        fields: [
          { key: 'first_name', width: 'half', required: true },
          { key: 'last_name', width: 'half' },
          'phone',
          { key: 'best_time', label: 'Best time to call', type: 'radio', options: ['Morning', 'Afternoon', 'Evening'] },
          { key: 'message', label: 'Anything we should know?', type: 'textarea', hint: 'At least 10 characters.',
            validation: { min_length: 10 } }
        ],
        submitLabel: 'Call me back',
        successTitle: 'Thanks, {first_name}',
        successMessage: "We'll call you soon.",
        texts: { sendingLabel: 'Booking...', requiredNote: '* required' },
        messages: { required: 'Please give your {label}.', rate_limited: 'Too many tries, please wait a moment.' },
        onReady: function () { log('onReady') },
        onSuccess: function (result) { log('onSuccess', result) },
        onError: function (result) { log('onError', result) }
      })

      form.ready.then(function (drawn) { log('ready promise', drawn) })
      form.fields().then(function (fields) {
        log('fields()', fields.map(function (field) { return field.key + ':' + field.type }))
      })
      // form.on works like the callbacks. It gives back a function that stops listening.
      form.on('success', function (result) { log("on('success')", result.status) })
    })

    // A drawn form also fires page events on its element. They bubble up, so
    // one listener on document hears every form on the page (useful for analytics).
    document.addEventListener('subcontext:leadform:submitted', function (event) {
      log('page event subcontext:leadform:submitted', event.detail)
    })
    document.addEventListener('subcontext:leadform:error', function (event) {
      log('page event subcontext:leadform:error', event.detail)
    })
  </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>