Slate Embedded Form Custom Loader

slate-custom-form-loader.html

<div id="form_[FORM_ID]">Loading...</div>
<script>
(function(l,o,a,d,e,r){
var formId = "[FORM_ID]";
e=o.createElement(a);e.onload=d(formId);
e.src="https://[SLATE_HOST]/register/?id=" + formId + "&div=form_" + formId + "&output=embed";
r=o.getElementsByTagName(a)[0];r.parentNode.insertBefore(e,r);
})(window, document, 'script', function(formId) {

  const targetNode = document.querySelector(`#form_${formId}`);

  const fillFields = () => {

    // Set the program ID for the program.
    // E.g MBA
    const programId = '[PROGRAM_ID]';
    
    const fieldMap = {
      '[data-export="pardot_havequestion"] select': 'Graduate Programs',
      '[data-export="sys:field:academic_program"]:not([aria-hidden="true"]) select': programId,
    };

    for (const selector in fieldMap) {
      if (! fieldMap.hasOwnProperty(selector))
        continue;

      setTimeout(() => {
        const field = targetNode.querySelector(selector);
        field.value = fieldMap[selector];
        field.closest('[data-export]').style.display = 'none';
        field.dispatchEvent(new Event('change', { bubbles: true }));
      }, 50);
      
    }

    targetNode.style.display = 'block';

  };

  const observer = new MutationObserver((mutationList, observer) => {
    for (const mutation of mutationList) {
      if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
        // Check if the added node is or becomes the first child
        if (targetNode.firstChild && mutation.addedNodes[0] === targetNode.firstChild) {
          fillFields();
          observer.disconnect();
        }
      }
    }
  });

  observer.observe(targetNode, { 
    childList: true
  });

});
</script>