diff --git a/blocks/marketo-2/marketo-2.css b/blocks/marketo-2/marketo-2.css new file mode 100644 index 00000000..63b2c685 --- /dev/null +++ b/blocks/marketo-2/marketo-2.css @@ -0,0 +1,451 @@ +/* stylelint-disable selector-id-pattern */ +/* stylelint-disable selector-class-pattern */ +/* stylelint-disable no-descending-specificity */ + +.section.marketo-2-container.multiple .marketo-2-wrapper { + display: flex; + flex-direction: column; + gap: 32px; +} + +/* Ordering based on content with form */ +.section.marketo-2-container.multiple .marketo-2-wrapper > .default-content-wrapper { + order: 1; +} + +.section.marketo-2-container.multiple .marketo-2-wrapper > .marketo { + order: 2; +} + +.section.marketo-2-container.multiple .marketo-2-wrapper > .columns-wrapper { + order: 3; +} + +.section.marketo-2-container .marketo-2-wrapper .default-content-wrapper h4, +.section.marketo-2-container .marketo-2-wrapper .columns-wrapper h4 { + font-family: var(--sans-serif-font-light); + font-size: var(--font-size-18); +} + +.section.marketo-2-container .marketo-2-wrapper .default-content-wrapper h6, +.section.marketo-2-container .marketo-2-wrapper .columns-wrapper h6 { + font-family: var(--sans-serif-font-medium); + font-size: var(--font-size-18); + margin: 0 0 var(--spacer-element-03); +} + +.section.marketo-2-container .marketo-2-wrapper .default-content-wrapper p, +.section.marketo-2-container .marketo-2-wrapper .columns-wrapper p { + font-size: var(--font-size-16); + font-family: var(--sans-serif-font-light); + letter-spacing: var(--letter-spacing-001-em); + line-height: var(--line-height-160); + font-weight: 300; +} + +.section.marketo-2-container .marketo-2-wrapper .default-content-wrapper > *, +.section.marketo-2-container .marketo-2-wrapper .columns-wrapper > * { + margin: 0 0 var(--spacer-element-08); +} + +.section.marketo-2-container .marketo-2-wrapper div.spacious p { + margin: 0 0 var(--spacer-element-10); +} + +.marketo { + width: 100%; +} + +/* Merative styling for Marketo form */ +.mktoForm { + margin: 0 auto !important; + width: 100% !important; +} + +.mktoForm .mktoOffset { + width: 0 !important; + height: 0 !important; +} + +.mktoForm .mktoFieldWrap .mktoHtmlText { + color: var(--neutral-carbon) !important; + font-family: var(--sans-serif-font-light) !important; + font-size: var(--font-size-12) !important; + letter-spacing: .01em !important; + line-height: 160% !important; + width: 100% !important; + margin: 0 0 var(--spacer-element-07) 0; +} + +.mktoForm .mktoFieldWrap .mktoHtmlText p { + color: var(--neutral-carbon) !important; + font-family: var(--sans-serif-font-light) !important; + font-size: var(--font-size-12) !important; + letter-spacing: .01em !important; + line-height: 160% !important; + width: 100% !important; +} + +.mktoForm .mktoFieldWrap .mktoHtmlText a { + padding: 0 !important; +} + +.mktoForm .mktoFormRow { + clear: both !important; +} + +.mktoForm .mktoFormRow .mktoFieldWrap, +.mktoForm .mktoFormRow .mktoFormCol { + width: 100% !important; + margin-bottom: 0 !important; +} + +.mktoForm div:first-of-type .mktoFormCol .mktoFieldWrap .mktoHtmlText { + font-size: var(--font-size-16) !important; + margin-bottom: 1rem !important; +} + +.mktoForm div:first-of-type .mktoFormCol .mktoFieldWrap .mktoHtmlText span { + color: var(--neutral-carbon) !important; +} + +.mktoForm div:first-of-type .mktoFormCol .mktoFieldWrap .mktoHtmlText small { + float: right; + font-size: var(--font-size-16); + text-align: right !important; +} + +.mktoForm .mktoButtonWrap .mktoButton { + -webkit-box-align: center !important; + -ms-flex-align: center !important; + align-items: center !important; + border: 0 !important; + border-radius: 40px !important; + box-sizing: border-box !important; + color: var(--neutral-white) !important; + cursor: pointer !important; + display: flex !important; + font-family: var(--sans-serif-font-medium) !important; + font-size: var(--font-size-16) !important; + font-weight: 400 !important; + -webkit-box-pack: justify !important; + -ms-flex-pack: justify !important; + justify-content: space-between !important; + line-height: 25.6px !important; + margin: 37px 0; + max-height: 62px !important; + padding: 11px 16px 11px 24px !important; + width: auto !important; + background-image: var(--gradient-to-right); + background-position: 0 0; + background-size: 200% auto; + transition: all .4s ease-in-out; +} + +.mktoForm .mktoButtonWrap .mktoButton:active, +.mktoForm .mktoButtonWrap .mktoButton:hover { + border: 2px solid transparent; + background-position: 96% 0; +} + +.mktoForm .mktoButtonWrap .mktoButton::after { + background-size: contain !important; + color: var(--neutral-white) !important; + content: url('../../icons/arrow-white.svg') !important; + height: 22px !important; + width: 22px !important; + margin-left: 24px +} + +.mktoForm .mktoAsterix, +.mktoForm .mktoErrorArrowWrap { + display: none !important +} + +.mktoForm .mktoLabel { + color: var(--neutral-carbon) !important; + font-family: var(--sans-serif-font-light) !important; + font-size: var(--font-size-16) !important; + font-weight: 400 !important; + letter-spacing: .01em !important; + line-height: 160% !important; + width: 100% !important; + padding-top: 0 !important; +} + +.mktoForm .mktoFormCol { + min-height: unset !important; +} + +.mktoForm .mktoFormCol .mktoLabel { + padding-bottom: var(--spacer-element-04) !important; +} + +.mktoForm .mktoGutter.mktoHasWidth { + height: auto; +} + +.mktoForm .mktoRequiredField .mktoLabel::after { + color: var(--neutral-carbon) !important; + content: "*" !important; + display: inline-block !important; +} + +.mktoForm .mktoEmailField, +.mktoForm .mktoTelField, +.mktoForm .mktoTextField, +.mktoForm select.mktoField, +.mktoForm textarea.mktoField { + /* stylelint-disable property-no-vendor-prefix */ + -webkit-appearance: none; + background: var(--neutral-bone) !important; + border-color: var(--neutral-carbon) !important; + border-width: 0 0 1px !important; + color: var(--neutral-carbon) !important; + font-family: var(--sans-serif-font-light) !important; + font-size: var(--font-size-16) !important; + height: 43px !important; + letter-spacing: .01em !important; + line-height: 160% !important; + margin-top: 2px !important; + margin-bottom: var(--spacer-layout-04) !important; + outline: 0 !important; + padding-left: 15px !important; + width: 100% !important; +} + +.mktoForm .mktoEmailField.mktoRequired, +.mktoForm .mktoTelField.mktoRequired, +.mktoForm .mktoTextField.mktoRequired, +.mktoForm select.mktoField.mktoRequired, +.mktoForm textarea.mktoField.mktoRequired { + border-color: var(--neutral-carbon) !important; +} + +.mktoForm .mktoEmailField.mktoRequired.mktoInvalid, +.mktoForm .mktoTelField.mktoRequired.mktoInvalid, +.mktoForm .mktoTextField.mktoRequired.mktoInvalid, +.mktoForm select.mktoField.mktoRequired.mktoInvalid, +.mktoForm textarea.mktoField.mktoRequired.mktoInvalid { + border-color: #d2192a !important; + border-width: 0 0 1px !important; + outline: 0 !important; +} + +.mktoForm .mktoEmailField.mktoRequired.mktoValid, +.mktoForm .mktoTelField.mktoRequired.mktoValid, +.mktoForm .mktoTextField.mktoRequired.mktoValid, +.mktoForm select.mktoField.mktoRequired.mktoValid, +.mktoForm textarea.mktoField.mktoRequired.mktoValid { + border-color: var(--neutral-carbon) !important; +} + +.mktoForm select.mktoField { + background-image: url('../../icons/select-arrow-down.png') !important; + background-position: right 10px center !important; + background-repeat: no-repeat !important; + background-size: 18px !important; +} + +.mktoForm select.mktoField option { + color: var(--neutral-carbon) !important; + font-family: var(--sans-serif-font-light) !important; + font-size: var(--font-size-16) !important; + letter-spacing: .16px; + line-height: 160% !important; +} + +.mktoForm select.mktoField option:checked { + background-color: #ebccff !important; +} + +.mktoForm textarea.mktoField { + height: 123px !important; +} + +.mktoForm .mktoEmailField:focus, +.mktoForm .mktoTelField:focus, +.mktoForm .mktoTextField:focus, +.mktoForm select.mktoField:focus, +.mktoForm textarea.mktoField:focus { + border-width: 0 !important; + outline: 1px solid var(--primary-purple) !important; +} + +.mktoForm .mktoFieldWrap:focus-within .mktoLabel, +.mktoForm .mktoFieldWrap:focus-within .mktoLabel::after { + color: var(--primary-purple) !important; +} + +.mktoForm .mktoFieldWrap .mktoError { + border: 0 !important; + left: 0 !important; + width: 100% !important; +} + +.mktoForm .mktoFieldWrap .mktoError #ValidMsgCompany, +.mktoForm .mktoFieldWrap .mktoError .mktoErrorMsg { + background-color: transparent !important; + background-image: none !important; + border: 0 !important; + border-radius: 0 !important; + + /* -webkit-box-shadow: none !important; */ + box-shadow: none !important; + color: #d2192a !important; + font-family: var(--sans-serif-font-light) !important; + font-size: var(--font-size-12) !important; + letter-spacing: .01em !important; + line-height: 120% !important; + margin-top: 0 !important; + max-width: none !important; + padding: 0 !important; + position: relative !important; + text-shadow: none !important; + top: -40px !important; +} + +.mktoForm .mktoFieldWrap .mktoError .mktoErrorMsg .mktoErrorDetail, +.mktoForm .mktoFieldWrap .mktoError #ValidMsgCompany .mktoErrorDetail { + display: inline-block !important; +} + +.mktoForm .mktoFieldWrap .mktoError #ValidMsgCompany::after, +.mktoForm .mktoFieldWrap .mktoError .mktoErrorMsg::after { + background-image: url('../../icons/marketo_error_icon.svg') !important; + background-repeat: no-repeat !important; + content: " "; + float: right; + height: 16px; + position: relative; + right: 10px; + top: -40px; + width: 16px +} + +.mktoForm .mktoFieldWrap .mktoError #ValidMsgcontactmeHowcanwehelp::after, +.mktoForm .mktoFieldWrap .mktoError #ValidMsgCountry::after, +.mktoForm .mktoFieldWrap .mktoError #ValidMsgRBN_Email_Permissions__c::after, +.mktoForm .mktoFieldWrap .mktoError #ValidMsgRBN_Phone_Permissions__c::after { + right: 40px +} + +.mktoForm .mktoFieldWrap .mktoError #ValidMsgEmail, +.mktoForm .mktoFieldWrap .mktoError #ValidMsgPhone { + top: -55px !important; +} + +.mktoForm .mktoButton { + margin-top: var(--spacer-layout-04) !important; +} + +input[type=radio] + label::before { + content: unset !important; +} + +input[type=radio] { + accent-color: var(--neutral-carbon) !important; + vertical-align: middle !important; + opacity: 1 !important; + height: 20px !important; + width: 20px !important; + flex-basis: 20px; + flex-shrink: 0; + cursor: pointer; +} + +.mktoForm select.mktoField[multiple] { + background-image: none !important; + padding: 0 !important; +} + +.mktoForm select.mktoField[multiple] option { + height: 26px !important; + padding: 15px 16px !important; + display: flex !important; + -webkit-box-align: center !important; + -ms-flex-align: center !important; + align-items: center !important; +} + +.mktoForm .mktoRadioList { + display: flex; + width: auto !important; + align-items: center; + padding: 0 !important; + margin: var(--spacer-element-07) 0; + float: left !important; +} + +.mktoForm .mktoRadioList > label { + color: var(--neutral-carbon) !important; + font-family: var(--sans-serif-font-light) !important; + font-size: var(--font-size-16) !important; + letter-spacing: 0.16px; + line-height: 160% !important; + margin: 0 var(--spacer-element-07) 0 var(--spacer-element-04) !important; +} + +/* Media queries */ +@media screen and (min-width: 768px) { + .section.marketo-2-container.multiple .marketo-2-wrapper { + gap: 80px; + } +} + +@media screen and (min-width: 1200px) { + .section.marketo-2-container .marketo-2-wrapper .default-content-wrapper h4, + .section.marketo-2-container .marketo-2-wrapper .columns-wrapper h4 { + font-family: var(--sans-serif-font-light); + font-size: var(--font-size-21); + } + + .section.marketo-2-container .marketo-2-wrapper .default-content-wrapper h6, + .section.marketo-2-container .marketo-2-wrapper .columns-wrapper h6 { + font-size: var(--font-size-21); + } + + .section.marketo-2-container.multiple .marketo-2-wrapper { + flex-flow: row nowrap; + gap: 120px; + width: var(--section-width-desktop); + margin: 0 auto; + } + + .section.marketo-2-container.multiple .marketo-2-wrapper > div { + order: unset!important; + } + + .section.marketo-2-container.multiple .marketo-2-wrapper > div:not(.marketo) { + flex: 1; + } + + .section.marketo-2-container.multiple .marketo-2-wrapper .columns > div { + flex-flow: column; + } + + .section.marketo-2-container.multiple .marketo-2-wrapper .columns > div > div { + margin-left: 0; + } + + .section.marketo-2-container.multiple div > .marketo:first-child { + width: 648px; + } + + .section.marketo-2-container.multiple div .marketo:last-child { + width: 376px; + } + + .section.marketo-2-container .marketo-2-wrapper .default-content-wrapper.show-more { + border-bottom: none; + } + + .section.marketo-2-container .marketo-2-wrapper .default-content-wrapper.show-more > p:first-of-type ~ *:not(a) { + display: revert; + } + + .section.marketo-2-container .marketo-2-wrapper .default-content-wrapper.show-more > a { + display: none; + } + +} diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js new file mode 100644 index 00000000..6764a97f --- /dev/null +++ b/blocks/marketo-2/marketo-2.js @@ -0,0 +1,133 @@ +/* eslint-disable no-restricted-globals */ +/* eslint-disable no-underscore-dangle */ +/* eslint-disable no-undef */ +import { createTag } from '../../scripts/scripts.js'; +import { readBlockConfig, fetchPlaceholders } from '../../scripts/lib-franklin.js'; + +const placeholders = await fetchPlaceholders(); + +const loadScript = (url, attrs) => { + const head = document.querySelector('head'); + const script = document.createElement('script'); + script.src = url; + if (attrs) { + // eslint-disable-next-line no-restricted-syntax, guard-for-in + for (const attr in attrs) { + script.setAttribute(attr, attrs[attr]); + } + } + head.append(script); + return script; +}; + +const embedMarketoForm = (marketoId, formId, successUrl) => { + if (formId && marketoId) { + const mktoScriptTag = loadScript('//go.merative.com/js/forms2/js/forms2.min.js'); + mktoScriptTag.onload = () => { + if (successUrl) { + window.MktoForms2.loadForm('//go.merative.com', `${marketoId}`, formId, (form) => { + // Add an onSuccess handler + form.onSuccess((values) => { + // console.log('Form submitted successfully'); + if (typeof drift !== 'undefined') { + drift.on('ready', (api) => { + try { + api.commitFormData({ + campaignId: 2787244, + }); + if (location.href.includes('/contact')) { + // Drift popup custom code + api.collectFormData(values, { + campaignId: 2787244, + followupUrl: successUrl, + stageData: true, + }); + // Adobe Launch tracking for form submission + if (window._satellite) { + _satellite.track('formSubmit', { + formName: document.title, + }); + } + } + } catch (error) { + console.info('Error with Drift API calls:', error); + } + }); + } else { + console.info('Drift is not defined'); + } + // Return false to prevent the submission handler continuing with its own processing + return false; + }); + + let hasTrackedFormLoad = false; + window.MktoForms2.whenReady((f) => { + if (!hasTrackedFormLoad && window._satellite) { + window._satellite.track('formLoad', { + formName: document.title, + }); + hasTrackedFormLoad = true; + } + + f.addHiddenFields({ + RBN_Referral_URL_Cargo__c: document.URL, + }); + }); + const formInputEle = document.querySelectorAll('form input, form select'); + function focusListener() { + window._satellite?.track('formStart', { + formName: document.title, + }); + formInputEle.forEach((inputEle) => { + inputEle.removeEventListener('focusin', focusListener); + }); + } + formInputEle.forEach((inputEle) => { + inputEle.addEventListener('focusin', focusListener); + }); + }); + } else { + window.MktoForms2.loadForm('//go.merative.com', `${marketoId}`, formId); + } + }; + } +}; + +export default function decorate(block) { + // Read block configuration + const blockConfig = readBlockConfig(block); + const marketoId = placeholders.marketoid; + + // Extract form configuration details + const formTitle = blockConfig['form-title']; + const formId = blockConfig['form-id']; + const successUrl = blockConfig['success-url']; + + if (formId && marketoId) { + // Create the form element + const formElement = createTag('form', { id: `mktoForm_${formId}` }); + block.textContent = ''; + + // Create and append form title (if available) + if (formTitle) { + const titleElement = createTag('h2', { id: `${formTitle.toLowerCase()}` }); + titleElement.textContent = formTitle; + block.append(titleElement); + } + + // Append the form element + block.append(formElement); + + // Set up an observer to embed the Marketo form when block is in view + const observer = new IntersectionObserver((entries) => { + if (entries.some((e) => e.isIntersecting)) { + // Embed the Marketo form + embedMarketoForm(marketoId, formId, successUrl); + observer.disconnect(); + } + }); + + // Start observing the block + observer.observe(block); + } +} diff --git a/scripts/scripts.js b/scripts/scripts.js index 7994321e..f7a7b269 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -952,8 +952,8 @@ function restructureContentLayout(main) { return; } - // Find the Marketo element - const marketoWrapper = main.querySelector('.marketo-wrapper'); + // Find the Marketo element (either .marketo-wrapper or .marketo-2-wrapper) + const marketoWrapper = main.querySelector('.marketo-wrapper, .marketo-2-wrapper'); if (!marketoWrapper) { return; } @@ -969,16 +969,16 @@ function restructureContentLayout(main) { // Iterate through the parent-level elements parentElements.forEach((element) => { - // Check if the element is not equal to '.marketo-wrapper' - if (!element.classList.contains('marketo-wrapper')) { + // Check if the element is not equal to '.marketo-wrapper' or '.marketo-2-wrapper' + if (!element.classList.contains('marketo-wrapper') && !element.classList.contains('marketo-2-wrapper')) { contentBodyText.appendChild(element); } }); - // Insert '.section-content-body__text' before '.marketo-wrapper' + // Insert '.section-content-body__text' before the Marketo wrapper element sectionContentBody.insertBefore(contentBodyText, marketoWrapper); - // Add '.section-content-body__form' class to '.marketo-wrapper' + // Add '.section-content-body__form' class to the Marketo wrapper element marketoWrapper.classList.add('section-content-body__form'); } }