Merge pull request #1588 from hlxsites/cb-forms

Share your story forms
hlxsites · Jan 7, 2025 · bb80fde · bb80fde
2 parents 2305732 + f33a69e
commit bb80fde
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 56 deletions.
diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
@@ -120,6 +120,7 @@
 .footer-news-events > div:first-of-type > div {
   border-bottom: 2px solid var(--highlight-background-color);
   margin-left: 0;
+  cursor: pointer;
 }
 
 .footer-news-events > div:nth-child(1) > div:nth-child(1) {

diff --git a/blocks/forms/formHelper.js b/blocks/forms/formHelper.js
@@ -26,6 +26,7 @@ export async function extractFormData(block) {
 
 // get form id
 export const formMapping = [
+  { type: 'rfq', id: '09ad331d-27c6-470a-86d4-7d6c4b141bc8' }, // rfq master form
   // { type: 'app-note', id: '46645e42-ae08-4d49-9338-e09efb4c4035' }, // old app note master form
   { type: 'app-note', id: 'd6f54803-6515-4313-a7bd-025dfa5cbb5f' }, // New app note master form
   // { type: 'scientific-poster', id: '342c229a-9e0d-4f52-b4c4-07f067d39c31' }, // old poster master form
@@ -39,6 +40,8 @@ export const formMapping = [
   { type: 'newsletter', id: '3b6b0bc3-c874-403c-aa73-ee006b7eb8eb' },
   { type: 'inquiry-with-thankyou', id: '5461143e-c315-40cf-9a92-dd8515e61d4c' },
   { type: 'inquiry', id: 'bbca06dd-57d2-433b-a8c1-d5cd18b4ce28' },
+  // { type: 'share-story', id: 'a1086f3a-ed6e-47d1-9694-17f8c0a28612' },
+  { type: 'share-story', id: '5d062792-bb0b-4f11-bc26-f3d3422ae4ec' },
 ];
 
 export function getFormId(type) {
@@ -65,6 +68,7 @@ export const fieldsObj = [
   { newName: 'first_name', fieldName: 'firstname' },
   { newName: 'last_name', fieldName: 'lastname' },
   { newName: 'email', fieldName: 'email' },
+  { newName: 'phone', fieldName: 'phone' },
   { newName: 'phone', fieldName: '0-2/phone' },
   { newName: 'company', fieldName: 'company' },
   { newName: 'country', fieldName: 'country' },

diff --git a/blocks/forms/forms.css b/blocks/forms/forms.css
@@ -4,18 +4,18 @@
 }
 
 /* stylelint-disable no-descending-specificity */
-.hs-dependent-field,
-.hs-form-field {
+.hs-form .hs-dependent-field,
+.hs-form .hs-form-field {
   line-height: 1.4em;
   margin: 0;
   padding-bottom: 15px;
 }
 
-.hs-dependent-field:has(> .hs-form-field) {
+.hs-form .hs-dependent-field:has(> .hs-form-field) {
   padding-bottom: 0;
 }
 
-.hs-form-field .hs-field-desc {
+.hs-form .hs-form-field .hs-field-desc {
   color: var(--input-color);
   font-size: 10px;
   font-weight: 400;
@@ -25,7 +25,7 @@
   width: 90% !important;
 }
 
-.hs-form-field .hs-input {
+.hs-form .hs-form-field .hs-input {
   background-image: none;
   box-shadow: none;
   color: var(--input-color);
@@ -40,27 +40,27 @@
   margin-bottom: 0;
 }
 
-.hs-form-field .hs-input,
-.hs-form-field .hs-form-booleancheckbox label span::before {
+.hs-form .hs-form-field .hs-input,
+.hs-form .hs-form-field .hs-form-booleancheckbox label span::before {
   background-color: var(--background-color);
   border: 1px solid var(--border-color);
   border-radius: 0;
 }
 
-.hs-form-field .hs-form-booleancheckbox label span::before,
-.hs-form-field .hs-input[type="checkbox"]:checked ~ span::after {
+.hs-form .hs-form-field .hs-form-booleancheckbox label span::before,
+.hs-form .hs-form-field .hs-input[type="checkbox"]:checked ~ span::after {
   position: absolute;
   top: 1px;
 }
 
-.hs-form-field .hs-form-booleancheckbox label span::before {
+.hs-form .hs-form-field .hs-form-booleancheckbox label span::before {
   content: "";
   height: 20px;
   width: 20px;
   left: -32px;
 }
 
-.hs-form-field .hs-input[type="checkbox"]:checked ~ span::after {
+.hs-form .hs-form-field .hs-input[type="checkbox"]:checked ~ span::after {
   content: "\2714";
   color: var(--text-blue);
   left: -28px;
@@ -69,28 +69,30 @@
   transition: all 0.2s;
 }
 
-.hs-form-field textarea.hs-input {
+.hs-form .hs-form-field textarea.hs-input,
+.hs-form .hs-form-field textarea.hs-fieldtype-textarea {
   height: 100px;
+  width: 100%;
 }
 
-.hs-fieldtype-booleancheckbox {
+.hs-form .hs-fieldtype-booleancheckbox {
   cursor: pointer;
   display: flex;
   flex-direction: column;
   margin-bottom: 0;
   padding-left: 32px;
 }
 
-.hs-form-booleancheckbox label {
+.hs-form .hs-form-booleancheckbox label {
   display: inline-block;
 }
 
-.hs-form-field .hs-field-desc,
-.hs-form-field label:not(.hs-form-checkbox-display) {
+.hs-form .hs-form-field .hs-field-desc,
+.hs-form .hs-form-field label:not(.hs-form-checkbox-display) {
   display: none;
 }
 
-.hs-fieldtype-booleancheckbox .hs-form-booleancheckbox label {
+.hs-form .hs-fieldtype-booleancheckbox .hs-form-booleancheckbox label {
   background: none;
   clear: none;
   color: var(--text-blue);
@@ -103,7 +105,7 @@
   position: relative;
 }
 
-.hs-form-field .hs-input[type="checkbox"] {
+.hs-form .hs-form-field .hs-input[type="checkbox"] {
   clear: none;
   display: block;
   font-weight: 400;
@@ -116,20 +118,20 @@
   width: 5%;
 }
 
-.inputs-list {
+.hs-form .inputs-list {
   list-style: none;
   padding-left: 0;
 }
 
-legend {
+.hs-form legend {
   float: none;
 }
 
-.hs-fieldtype-booleancheckbox legend {
+.hs-form .hs-fieldtype-booleancheckbox legend {
   order: 2;
 }
 
-.hs-fieldtype-booleancheckbox legend,
+.hs-form .hs-fieldtype-booleancheckbox legend,
 label.privacy {
   border: none;
   color: inherit;
@@ -140,22 +142,22 @@ label.privacy {
   display: block;
 }
 
-.hs-fieldtype-booleancheckbox .input {
+.hs-form .hs-fieldtype-booleancheckbox .input {
   order: 1;
 }
 
-.hs-fieldtype-booleancheckbox .input .inputs-list,
-.hs-fieldtype-booleancheckbox .input .inputs-list li {
+.hs-form .hs-fieldtype-booleancheckbox .input .inputs-list,
+.hs-form .hs-fieldtype-booleancheckbox .input .inputs-list li {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.hs-form-field .hs-form-booleancheckbox label span {
+.hs-form .hs-form-field .hs-form-booleancheckbox label span {
   font-size: 14px;
 }
 
-.hs-error-msgs.inputs-list,
-.hs-error-msgs.inputs-list .hs-error-msg {
+.hs-form .hs-error-msgs.inputs-list,
+.hs-form .hs-error-msgs.inputs-list .hs-error-msg {
   color: red;
   display: block;
   font-size: 12px;
@@ -241,6 +243,15 @@ main form fieldset[class*="form-columns"] .input {
   text-align: left;
 }
 
+.hubspot-form .hs-form fieldset {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+.hubspot-form fieldset[class*="form-columns"] .input {
+  margin-right: 0 !important;
+}
+
 .hubspot-form form .hs-submit {
   order: 1;
 }
@@ -276,6 +287,24 @@ input[type="submit"] {
   text-decoration: none !important;
 }
 
+.show-label .hs-form .hs-form-field label,
+.show-label .hs-form .hs-form-field .hs-field-desc {
+  display: block;
+  color: #34393d;
+  font-weight: 600;
+  padding: 3px 13px 0 0;
+}
+
+.show-label .hs-form .hs-form-field label {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.show-label .hs-form .hs-form-field .hs-field-desc {
+  font-size: 13px;
+}
+
 /* INQUERY FORM */
 .forms.inquiry h3,
 .forms.inquiry-with-thankyou h3 {
@@ -311,14 +340,39 @@ input[type="submit"] {
   max-width: 100%;
 }
 
+/* show modal */
+.hubspot-form.show-label .hs-form .hs-form-field .hs-input {
+  width: 100%;
+  background-color: #fff;
+  background-image: none;
+  border: none;
+  border-radius: 0;
+  box-shadow: 0 0 10px 1px rgb(0 0 0/ 10%);
+  color: #34393d;
+  display: block;
+  font-size: 18px;
+  height: 30px;
+  line-height: 1.4285;
+  outline: none;
+  padding: 5px;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+
+.hubspot-form.show-label .hs-form .hs-form-field .hs-input.hs-fieldtype-textarea {
+  height: 100px;
+}
+
 @media only screen and (min-width: 992px) {
   .hs-submit .actions {
     max-width: 543px;
   }
 }
 
 @media only screen and (min-width: 768px) {
-  main form fieldset.form-columns-2 {
+  main form fieldset.form-columns-2,
+  .hubspot-form fieldset.form-columns-2 {
     display: flex;
     gap: 15px;
   }

diff --git a/blocks/forms/forms.js b/blocks/forms/forms.js
@@ -34,7 +34,7 @@ export function createHubSpotForm(formConfig, target, type = '') {
               submitInput.replaceWith(submitButton);
             }
 
-            const privacy = document.querySelector('label.privacy');
+            const privacy = document.querySelector('label.privacy, .privacy>label');
             if (!privacy) {
               const privacyMsg = label({ class: 'privacy' },
                 'By submitting your details, you confirm that you have reviewed and agree with the Molecular Devices ',
@@ -86,5 +86,6 @@ export default async function decorate(block, index) {
 
   block.innerHTML = '';
   block.appendChild(form);
+  console.log(formConfig);
   loadHubSpotScript(createHubSpotForm.bind(null, formConfig, target, formType));
 }
diff --git a/blocks/quote-request/quote-request.js b/blocks/quote-request/quote-request.js
@@ -1,13 +1,12 @@
 import ffetch from '../../scripts/ffetch.js';
-import {
-  loadScript, getCookie, fetchFragment,
-} from '../../scripts/scripts.js';
+import { getCookie, fetchFragment } from '../../scripts/scripts.js';
 import {
   div, h3, ul, li, img, a, span, i, button,
   p,
 } from '../../scripts/dom-helpers.js';
 import { sampleRUM } from '../../scripts/lib-franklin.js';
 import { createHubSpotForm, loadHubSpotScript } from '../forms/forms.js';
+import { getFormId } from '../forms/formHelper.js';
 
 const PREVIEW_DOMAIN = '.aem.page';
 
@@ -147,8 +146,6 @@ function prepImageUrl(thumbImage) {
 }
 
 async function loadIframeForm(data, type) {
-  loadScript('../../scripts/iframeResizer.min.js');
-  // const formUrl = 'https://info.moleculardevices.com/rfq';
   const root = document.getElementById('step-3');
   const rfqRUM = { source: 'global' };
   root.innerHTML = '';
@@ -231,7 +228,7 @@ async function loadIframeForm(data, type) {
   // if (mpCmpValue) cmpValue = mpCmpValue;
   const requestTypeParam = queryParams && queryParams.get('request_type');
   const hubSpotQuery = {
-    formId: '09ad331d-27c6-470a-86d4-7d6c4b141bc8',
+    formId: getFormId('rfq'),
     productFamily: sfdcProductFamily,
     productSelection: sfdcProductSelection,
     productPrimaryApplication: sfdcPrimaryApplication,
@@ -324,7 +321,7 @@ function stepThree(tab, event) {
   loadIframeForm(tab, 'Global');
 
   if (event.target.closest('.rfq-icon-link').classList.contains('no-categ')) {
-    root.classList.add('no-categ-form');
+    root.classList.add('no-categ-form', 'hubspot-form');
   } else {
     root.classList.remove('no-categ-form');
   }
@@ -362,7 +359,7 @@ export default async function decorate(block) {
       block.appendChild(
         div({
           id: 'step-3',
-          class: 'rfq-product-wrapper request-quote-form hide-back-btn',
+          class: 'rfq-product-wrapper request-quote-form hide-back-btn hubspot-form',
         }),
       );
       if (!rfqData) {
@@ -383,7 +380,7 @@ export default async function decorate(block) {
           }),
           div({
             id: 'step-3',
-            class: 'rfq-product-wrapper request-quote-form',
+            class: 'rfq-product-wrapper request-quote-form hubspot-form',
             style: 'display: none;',
           }),
         ),

diff --git a/blocks/share-story/share-story.css b/blocks/share-story/share-story.css
@@ -74,7 +74,8 @@ body.modal-open {
   right: 0;
   top: 20px;
   width: 100%;
-  height: 80%;
+  height: 100%;
+  max-height: 80%;
 }
 
 .submit-story-modal iframe {
@@ -98,6 +99,8 @@ body.modal-open {
   background-color: var(--background-color);
   margin: 0 auto;
   height: 100%;
+  overflow-y: auto;
+  padding: 20px;
 }
 
 .submit-story-modal,
@@ -143,6 +146,12 @@ body.modal-open {
   color: var(--text-white);
 }
 
+/* submit your story form */
+.submit-story-modal .submit-story-modal-wrapper .submitted-message {
+  text-align: center;
+  padding: 30px 0;
+}
+
 @media only screen and (max-width: 991px) {
   .share-story {
     flex-direction: column;
@@ -161,7 +170,7 @@ body.modal-open {
   .share-story .social-links li:last-of-type {
     padding-right: 0;
   }
-  
+
   .share-story .share-event {
     border-right: none;
     padding: 20px 0;