landing_page/qdrant-landing/themes/qdrant-2024/layouts/partials/elastic-lucene/form-script.html

<script>
  hbspt.forms.create({
    portalId: '139603372',
    formId: '814b303f-2f24-460a-8a81-367146d98786',
    region: 'eu1',
    sfdcCampaignId: '701fI00000M2FnuQAF',
    target: '#qdrant-contact-form',
    cssClass: 'luceneForm',
    submitButtonClass: 'button button_contained button_lg',

    onFormReady: function ($form) {
      // Normalize to a plain DOM element
      var formEl;
      if ($form && $form.nodeType === 1) {
        formEl = $form;
      } else if ($form && $form[0] && $form[0].nodeType === 1) {
        formEl = $form[0];
      }
      if (!formEl) return;

      /* ──────────────────────────────
           Hidden field: last_conversion_campaign_name
        ───────────────────────────────*/
      var hidden = document.createElement('input');
      hidden.type = 'hidden';
      hidden.name = 'last_conversion_campaign_name';
      hidden.value = '2025.Q4_Website_Contact Us Form_Elastic_LP';
      formEl.appendChild(hidden);

      /* ──────────────────────────────
           Progressive steps logic
        ───────────────────────────────*/

      // Helper: get the .hs-form-field wrapper for a given input/select/textarea
      function wrapperForField(selector) {
        var field = formEl.querySelector(selector);
        return field && field.closest('.hs-form-field');
      }

      // Step 0: email (only visible on load)
      var step0 = [wrapperForField('input[name="email"]')];

      // Step 1: first/last/company/jobtitle
      var step1 = [
        wrapperForField('input[name="firstname"]'),
        wrapperForField('input[name="lastname"]'),
        wrapperForField('input[name="company"]'),
        wrapperForField('input[name="jobtitle"]'),
      ];

      // Step 2: number_of_vectors + message
      var step2 = [wrapperForField('input[name="number_of_vectors"]'), wrapperForField('textarea[name="message"]')];

      // Step 3: country
      var step3 = [wrapperForField('select[name="country"]')];

      // Clean out any null entries
      var steps = [step0, step1, step2, step3].map(function (group) {
        return group.filter(function (el) {
          return !!el;
        });
      });

      // Submit button wrapper (HubSpot’s markup varies a bit, so be lenient)
      var submitGroup = formEl.querySelector('.hs-submit, .hs_submit, .actions');
      if (submitGroup) submitGroup.style.display = 'none';

      // Hide all steps except the first (email)
      steps.forEach(function (group, index) {
        if (index === 0) return; // keep email visible
        group.forEach(function (el) {
          el.style.display = 'none';
        });
      });

      // REQUIRED fields that gate each step
      // 0: email
      // 1: firstname, lastname, company (jobtitle optional)
      // 2: message (number_of_vectors optional)
      // 3: no additional requirement – we only show it when step 2 is done
      var requiredSelectorsByStep = [
        ['input[name="email"]'],
        ['input[name="firstname"]', 'input[name="lastname"]', 'input[name="company"]'],
        ['textarea[name="message"]'],
        [],
      ];

      function isStepFilled(stepIndex) {
        var selectors = requiredSelectorsByStep[stepIndex] || [];
        for (var i = 0; i < selectors.length; i++) {
          var field = formEl.querySelector(selectors[i]);
          if (!field) continue; // don’t block if missing
          var val = field.value;
          if (!val || !val.trim()) {
            return false;
          }
        }
        return true;
      }

      function showGroup(group) {
        group.forEach(function (el) {
          el.style.display = '';
        });
      }

      function maybeShowNext(stepIndex) {
        if (!isStepFilled(stepIndex)) return;

        var nextIndex = stepIndex + 1;
        var nextStep = steps[nextIndex];

        if (nextStep) {
          // Reveal the next step
          showGroup(nextStep);

          // If this is the last step (country), also reveal the submit button
          if (nextIndex === steps.length - 1 && submitGroup) {
            submitGroup.style.display = '';
          }
        }
      }

      function attach(stepIndex, selectors) {
        selectors.forEach(function (sel) {
          var field = formEl.querySelector(sel);
          if (!field) return;

          ['input', 'change', 'blur'].forEach(function (evt) {
            field.addEventListener(evt, function () {
              maybeShowNext(stepIndex);
            });
          });
        });
      }

      // Attach listeners:

      // After email → show first/last/company/jobtitle
      attach(0, ['input[name="email"]']);

      // After first/last/company → show message + vectors
      attach(1, [
        'input[name="firstname"]',
        'input[name="lastname"]',
        'input[name="company"]',
        'input[name="jobtitle"]',
      ]);

      // After message (vectors optional) → show country + submit
      attach(2, ['input[name="number_of_vectors"]', 'textarea[name="message"]']);

      // Step 3 (country) doesn’t gate anything right now, but we could attach here if needed:
      // attach(3, ['select[name="country"]']);
    },
  });
</script>
<script>
          // shows a fallback content if HubSpot forms library is not loaded
          // what can happen if the user has trackers blocking policy turned on
          document.addEventListener('DOMContentLoaded', function () {
            if (typeof hbspt === 'undefined' || !hbspt.forms) {
              const fallbackButtonContainer = document.createElement('div');
              fallbackButtonContainer.className = 'd-flex flex-column align-content-center px-5 py-5';
              const fallbackText = document.createElement('p');
              fallbackText.className = 'text-white text-center mb-4';
              fallbackText.innerHTML = {{- .Params.form.fallback.text -}};
              fallbackButtonContainer.appendChild(fallbackText);

              // Create a fallback button only if the link is provided
              // warning: check if content via the link is not blocked as well
              {{ if .Params.form.fallback.link }}
              const fallbackButton = document.createElement('a');
              fallbackButton.href = {{- .Params.form.fallback.link -}};
              fallbackButton.target = '_blank';
              fallbackButton.className = 'button button_contained button_lg';
              fallbackButton.textContent = {{- .Params.form.fallback.buttonText -}};
              fallbackButtonContainer.appendChild(fallbackButton);
              {{ end }}

              document.getElementsByClassName("elastic-lucene-form__content")[0].appendChild(fallbackButtonContainer);
            }
          });
        </script>