reduced code to simplify and troubleshoot

Author: krizel4

blocks/forms/forms.css

@@ -40,6 +40,7 @@
 }
 
 main .section.form-container {
+    background-color: red;
     padding: var(--form-container-padding);
     font-family: var(--mt-form-font-family);
     background-image: url('../../styles/icons/Mammotome-BG_Pattern-1.svg');

blocks/forms/forms.js

@@ -1,49 +1,13 @@
-const loadScript = (url, callback, type) => {
-  const head = document.querySelector('head');
-  const script = document.createElement('script');
-  script.src = url;
-  if (type) {
-    script.setAttribute('type', type);
-  }
-  script.onload = callback;
-  head.append(script);
-  return script;
-};
 
 const embedMarketoForm = (formId) => {
-  const scriptUrl = '//www2.mammotome.com/js/forms2/js/forms2.min.js';
-  loadScript(scriptUrl, () => {
-    const formContainer = document.createElement('div');
-    formContainer.innerHTML = `<form id="mktoForm_${formId}"></form>`;
+formContainer.innerHTML = `<script src="//www2.mammotome.com/js/forms2/js/forms2.min.js"></script> <form id="mktoForm_1063"></form> <script>MktoForms2.loadForm("//www2.mammotome.com", "435-TDP-284", ${formId});</script>`;
     document.body.appendChild(formContainer);
-
-    if (window.MktoForms2) {
-      window.MktoForms2.loadForm('//www2.mammotome.com', '435-TDP-284', formId);
-    } else {
-      console.error('Marketo Forms library failed to load.');
-    }
-  });
-  return `<div id="marketo-embed-container">
-    <form id="mktoForm_${formId}"></form>
-  </div>`;
-};
-
-const loadEmbed = (block, link, formId) => {
-  if (block.classList.contains('embed-is-loaded')) {
-    return;
-  }
-
-  if (link.includes('mammotome.com')) {
-    block.innerHTML = embedMarketoForm(formId);
-    block.classList.add('embed-is-loaded');
-  } else {
-    console.error('Invalid link for Marketo form.');
-  }
-};
+    return embedMarketoForm;
+}
 
 export default function decorate(block) {
-  const link = block.dataset.link; // Assume link is provided via a data attribute
-  const formId = block.dataset.formId || '1063'; // Default to 1063 if no form ID provided
-  block.textContent = ''; // Clear block content
+  const link = block.dataset.link;
+  const formId = block.dataset.formId || '1063'; // default form is US-EN website form
+  block.textContent = '';
   loadEmbed(block, link, formId);
 }

styles/styles.css

@@ -12,7 +12,7 @@
 
 :root {
   /* colors */
-  --background-color: white;
+  --background-color: required;
   --light-color: #f8f8f8;
   --dark-color: #505050;
   --text-color: #131313;