Toggling form legel disclamers (#1717)

* test another legal disclaimer approach

* swapped disclaimers

* revert contact form id

qdrant-landing/themes/qdrant-2024/assets/css/partials/_contact-form.scss

@@ -49,6 +49,10 @@
     }
 
     fieldset {
+      .input .hs-input {
+        width: 100%;
+      }
+
       &.form-columns-1:has(> .legal-consent-container) {
         width: auto;
         margin-bottom: 0;
@@ -96,4 +100,17 @@
   @include media-breakpoint-up(xl) {
     padding: $spacer * 3 $spacer * 2.5;
   }
+
+  .input ul {
+    padding-left: 0;
+    li {
+      list-style: none;
+    }
+  }
+
+  #Legit-interest-text-legal-disclaimer,
+  #explicit-text-legal-disclaimer {
+    font-size: pxToRem(12);
+    line-height: pxToRem(18);
+  }
 }

qdrant-landing/themes/qdrant-2024/assets/css/partials/_hubspot-form.scss

@@ -64,7 +64,7 @@ form.hs-form {
 
     // todo: this may be removed once the form is updated
     // this hides an original HubSpot form header
-    &.form-columns-0 {
+    &.form-columns-0:first-child {
       margin: 0;
       .hs-richtext {
         display: none !important;
@@ -157,48 +157,49 @@ form.hs-form {
     }
   }
 
+  .hs-form-booleancheckbox-display,
+  .hs-form-checkbox-display {
+    display: flex;
+    align-items: center;
+
+    input[type='checkbox'] {
+      width: 1.2rem;
+      height: 1rem;
+      aspect-ratio: 1/1;
+      background-color: transparent;
+      border: 1px solid $neutral-40;
+      border-radius: 4px;
+      outline: none;
+      appearance: none;
+      padding: 0;
+      margin-right: pxToRem(8);
+
+      &:checked {
+        border-color: $neutral-100;
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iI2YwZjJmOSIgZD0iTTQzOC42IDEwNS40YzEyLjUgMTIuNSAxMi41IDMyLjggMCA0NS4zbC0yNTYgMjU2Yy0xMi41IDEyLjUtMzIuOCAxMi41LTQ1LjMgMGwtMTI4LTEyOGMtMTIuNS0xMi41LTEyLjUtMzIuOCAwLTQ1LjNzMzIuOC0xMi41IDQ1LjMgMEwxNjAgMzM4LjcgMzkzLjQgMTA1LjRjMTIuNS0xMi41IDMyLjgtMTIuNSA0NS4zIDB6Ii8+PC9zdmc+');
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+
+      &:focus {
+        border: 1px solid $neutral-100;
+      }
+    }
+  }
   .legal-consent-container {
-    p, & div {
+    p,
+    div,
+    span,
+    .hs-form-booleancheckbox-display {
       font-size: pxToRem(12);
       line-height: pxToRem(18);
       color: $neutral-60;
-      margin-bottom: pxToRem(8);
 
       a {
         color: $neutral-80;
         font-weight: 600;
       }
     }
-    .hs-form-booleancheckbox-display {
-      display: flex;
-      align-items: center;
-
-      input[type='checkbox'] {
-        width: 1.2rem;
-        height: 1rem;
-        aspect-ratio: 1/1;
-        background-color: transparent;
-        border: 1px solid $neutral-40;
-        border-radius: 4px;
-        outline: none;
-        appearance: none;
-        padding: 0;
-
-        &:checked {
-          border-color: $neutral-100;
-          background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iI2YwZjJmOSIgZD0iTTQzOC42IDEwNS40YzEyLjUgMTIuNSAxMi41IDMyLjggMCA0NS4zbC0yNTYgMjU2Yy0xMi41IDEyLjUtMzIuOCAxMi41LTQ1LjMgMGwtMTI4LTEyOGMtMTIuNS0xMi41LTEyLjUtMzIuOCAwLTQ1LjNzMzIuOC0xMi41IDQ1LjMgMEwxNjAgMzM4LjcgMzkzLjQgMTA1LjRjMTIuNS0xMi41IDMyLjgtMTIuNSA0NS4zIDB6Ii8+PC9zdmc+');
-          background-repeat: no-repeat;
-          background-position: center;
-        }
-
-        &:focus {
-          border: 1px solid $neutral-100;
-        }
-      }
-    }
-    &:last-child {
-        margin-bottom: pxToRem(20);
-    }
   }
 }
 
@@ -228,8 +229,7 @@ form.hs-form {
 }
 
 .hs_recaptcha.hs-recaptcha {
-
   .grecaptcha-badge {
     box-shadow: none !important;
   }
-}
+}

qdrant-landing/themes/qdrant-2024/layouts/partials/hubspot-form.html

@@ -27,6 +27,37 @@
             }
           });
         };
+
+        // List of countries that require explicit consent for data processing
+        const restrictedCountries = [
+          "Argentina", "Belgium", "Canada", "Czech Republic", "Cyprus", "Denmark", "Germany",
+          "Hungary", "Latvia", "Liechtenstein", "Luxembourg", "Netherlands", "Norway", "France",
+          "Finland", "Croatia", "Bulgaria", "Belarus", "Bosnia and Herzegovina", "Austria", "Estonia",
+          "Georgia", "Greenland", "Hong Kong", "Israel", "Italy", "Maldives", "Moldova", "Monaco",
+          "Portugal", "Russia", "Serbia", "Slovakia", "Slovenia", "Sweden", "Switzerland", "Türkiye",
+          "Ukraine", "Macedonia (FYROM)", "United Kingdom"
+        ];
+
+        // consent block should show additional checkbox for restricted countries
+        function updateConsentBlocks(form) {
+          const countryField = form.querySelector('select[name="country"]');
+          const legitDisclaimerText = form.querySelector('#Legit-interest-text-legal-disclaimer');
+          const explicitDisclaimerText = form.querySelector('#explicit-text-legal-disclaimer');
+
+          if (!countryField || !legitDisclaimerText || !explicitDisclaimerText) {
+            // If there is no country field or related disclaimers, exit early
+            return;
+          }
+
+          const selected = countryField.value;
+          const isRestricted = restrictedCountries.includes(selected);
+          const showOptIn = selected && isRestricted;
+
+          if (legitDisclaimerText) legitDisclaimerText.style.display = showOptIn ? "none" : "block";
+          if (explicitDisclaimerText) explicitDisclaimerText.style.display = showOptIn ? "block" : "none";
+        }
+
+
         try {
           hbspt.forms.create({
             ...options,
@@ -34,12 +65,24 @@
             pageId: "{{- .context.Permalink -}}",
             target: "#{{- .id -}}",
             onFormReady: function($form) {
+              if (!$form) {
+                console.warn("Form not found.");
+                return;
+              }
+
               initHoneypot($form);
+
+              updateConsentBlocks($form)
+              const countryField = $form.querySelector('select[name="country"]');
+              if (countryField) {
+                countryField.addEventListener("change", () => updateConsentBlocks($form));
+              }
+
             },
           });
         } catch (e) {
           document.getElementById("{{- .id -}}").innerHTML = '<p class="text-white">Here should be a form but looks like it was blocked on your side. Please, check your trackers blocking policy.</p>';
         }
       })()
-   </script>
+</script>
 </div>